Stylized checkbox
HTML
<input type="checkbox" name="remember-me" id="remember-me" class="eh-checkbox" checked="checked">
<label for="remember-me" class="eh-label">Remember Me</label>
CSS
.eh-checkbox {
display: none;
}
.eh-checkbox {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.eh-label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.eh-label:after {
content:'';
position: absolute;
left: 10px;
border: 1px solid #000;
height: 12px;
width: 12px;
}
.eh-checkbox + .eh-label {
padding-left: 26px;
height:25px;
display: inline-block;
line-height: 25px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 20px;
vertical-align: middle;
cursor: pointer;
}
.eh-checkbox:checked + .eh-label:before {
content:'\2713';
position: absolute;
left: 12px;
font-size: 24px;
color: #008000;
top: 4px;
}