One major thing I forgot to outline in the screencast is ensuring there is a focused state applied to the custom indicator when the user has focused the input. The code provided below includes a focus state.
<!-- checkbox --> <label class="control"> <input type="checkbox" class="control__input visually-hidden"> <span class="control__indicator"></span> Blue </label> <!-- radio --> <label class="control"> <input type="radio" name="color" class="control__input visually-hidden"> <span class="control __indicator control__ indicator--radio"></span> Blue </label> .control { display: inline-flex; align-items: center; } .control__indicator { margin-right: .25rem; width: .75rem; height: .75rem; background-color: #ccc; border-radius: 3px; } .control__indicator--radio { border-radius: 50%; } .control __input:focus ~ .control__ indicator { box-shadow: 0 0 0 0.2rem rgba(38,143,255,.5); } .control __input:checked ~ .control__ indicator { background-color: #05f; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xOCA3bC0xLjQxLTEuNDEtNi4zNCA2LjM0IDEuNDEgMS40MUwxOCA3em00LjI0LTEuNDFMMTEuNjYgMTYuMTcgNy40OCAxMmwtMS40MSAxLjQxTDExLjY2IDE5bDEyLTEyLTEuNDItMS40MXpNLjQxIDEzLjQxTDYgMTlsMS40MS0xLjQxTDEuODMgMTIgLjQxIDEzLjQxeiIvPjwvc3ZnPg=='); background-size: 80%; background-position: center; background-repeat: no-repeat; } /* Visually hide the browser input to ensure it is still focusable via keyboards */ .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } Here's a demo on CodePen that you can play with.
Top comments (1)
Cool, i usually use the label to create the checkbox with before and after pseudo elements. If you place the label after the input you can select it with
input:checked + labeland style it accordingly 😄