Skip to content

Instantly share code, notes, and snippets.

@yomotsu

yomotsu/.html

Last active October 26, 2016 05:40
Show Gist options
  • Save yomotsu/921ad872513dd2c99046dc11e917e0b6 to your computer and use it in GitHub Desktop.
Save yomotsu/921ad872513dd2c99046dc11e917e0b6 to your computer and use it in GitHub Desktop.
Download ZIP
checkbox
Raw
.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>=^.^=</title>
<style>
label{
cursor: pointer;
user-select: none;
}
.checkbox{
vertical-align: middle;
box-sizing: border-box;
position: relative;
display: inline-block;
width: 1.2em;
height: 1.2em;
}
.checkbox__input{
cursor: pointer;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
padding: 0;
border: 0;
margin: auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
opacity: 0.01\9;
}
.checkbox__input::-ms-check{
display: none;
}
.checkbox__display{
box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
border: 2px solid #9E9E9E;
border-radius: 2px;
transition: all .3s cubic-bezier( .4, 0, .23, 1 );
}
.checkbox__input:hover + .checkbox__display,
label:hover .checkbox__display{
border-color: #00BCD4;
box-shadow: 0 0 3px 3px rgba( 0, 188, 212, .3 );
}
.checkbox__input:checked + .checkbox__display{
border: .6em solid #00BCD4;
background-color: #00BCD4;
transition: translateZ( 0 );
}
.checkbox__input + .checkbox__display:before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
width: 0;
height: 100%;
background-image: url( "data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%20fill=%22%23fff%22%3E%3Cpath%20d=%22M27%208.8l-13.3%2017c-.1.1-.3.3-.5.3s-.4-.2-.5-.3c-.1-.1-7.5-7.2-7.5-7.2h-.2c-.1-.1-.1-.2-.1-.3%200-.1%200-.2.1-.3l.1-.1c.7-.8%202.2-2.3%202.3-2.4.1-.1.2-.3.5-.3.2%200%20.4.2.5.3.1.1%204.3%204.1%204.3%204.1l10.7-13.7c.1-.1.2-.1.3-.1.1%200%20.2%200%20.3.1l2.9%202.3c.1.1.1.2.1.3.1.2%200%20.3%200%20.3z%22/%3E%3C/svg%3E" );
background-size: 100% 100%;
background-size: cover;
transition: all .3s .1s cubic-bezier( .4, .0, .23, 1 );
}
.checkbox__input:checked + .checkbox__display:before{
width: 100%;
}
</style>
</head>
<body>
<span class="checkbox">
<input class="checkbox__input" type='checkbox' checked>
<span class="checkbox__display"></span>
</span>
<span class="checkbox" style="font-size: 20px;">
<input class="checkbox__input" type='checkbox' checked>
<span class="checkbox__display"></span>
</span>
<span class="checkbox" style="font-size: 30px;">
<input class="checkbox__input" type='checkbox' checked>
<span class="checkbox__display"></span>
</span>
<br><br>
<label>
<span class="checkbox">
<input class="checkbox__input" type='checkbox' checked>
<span class="checkbox__display"></span>
</span>
checkbox item
</label>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment