Custom CSS checkboxes (keyboard and readers support)
HTML
<body>
<p>body and div elements are only for presentation purposes.<br>
This method supports keyboard and is disabled-friendly.</p>
<div>
<input type="checkbox" id="checkbox" class="checkbox">
<label for="checkbox">default</label>
</div>
<div>
<input type="checkbox" id="checkbox2" class="checkbox checkbox--roll">
<label for="checkbox2">roll</label>
</div>
<div>
<input type="checkbox" id="checkbox3" class="checkbox checkbox--uneven-corners">
<label for="checkbox3">uneven-corners</label>
</div>
<div>
<input type="checkbox" id="checkbox4" class="checkbox checkbox--slide">
<label for="checkbox4">slide</label>
</div>
<div>
<input type="checkbox" id="checkbox6" class="checkbox checkbox--roll checkbox--slide checkbox--uneven-corners">
<label for="checkbox6">combo</label>
</div>
</body>
SCSS
a { color: inherit; } /* Dunno why codepad cuts first selector of code */
body { display: flex; flex-direction: column; justify-content: space-around; align-items: center; height: 100%; }
html { height: 100% !important; margin: 0;}
$font-size: 24px; /* size of input+label parent */
$after-size: 1.5; /* em */
$before-size: 2; /* em */
$after-char: '\2714';
/* Set your preffered font-size */
div { font-size: $font-size; }
/* main code */
.checkbox
{
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
.checkbox + label
{
font: 1em 'Arial';
position: relative;
cursor: pointer;
padding-left: calc(#{$before-size}em * 1.3);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: color 0.2s ease-in-out;
display: inline-block;
line-height: #{$before-size}em;
}
.checkbox:focus + label
{
color: #191;
}
.checkbox + label::before
{
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
width: #{$before-size}em;
height: #{$before-size}em;
border: 2px solid #191;
border-radius: 0.5em;
transition: all 0.3s linear;
background: #fff;
}
.checkbox:checked + label::before
{
background: #191;
border-width: 0.5em;
}
.checkbox + label::after
{
box-sizing: border-box;
content: $after-char;
font: #{$after-size}em 'Arial';
font-weight: bold;
position: absolute;
top: 0.05em;
left: 0;
/* ::before size divided by ::after font-size */
width: calc(#{$before-size}em / #{$after-size});
height: calc(#{$before-size}em / #{$after-size});
text-align: center;
color: #fff;
opacity: 0;
transition: all 0.3s ease-in-out;
line-height: calc(#{$before-size}em / #{$after-size});
}
.checkbox:checked + label::after
{
opacity: 1;
}
.checkbox--roll:checked + label::before
{
border-radius: 1em;
transform: rotate(180deg);
}
.checkbox--uneven-corners + label::before
{
border-radius: 0 1em 0 1em;
}
.checkbox--uneven-corners:checked + label::before
{
border-radius: 1em 0 1em 0;
}
.checkbox--slide + label::after
{
left: -4em;
}
.checkbox--slide:checked + label::after
{
left: 0;
}
2 Responses
Propably soon I will introduce more examples of checkboxes, or upload more snippets, so be in touch! :-)