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; }
JAVASCRIPT
Expand for more options Login