3 ms·
Custom radio buttons and checkboxes are remarkably easy if you style the <input> it self using `appearance: none`. With multiple background images and masks the
by runarberg 5y ago
Custom radio buttons and checkboxes are remarkably easy if you style the <input> it self using `appearance: none`. With multiple background images and masks there is really no need for a complicated sibling selectors and <label> setup:
<label>
<input type="checkbox">
<span class="label">Some label</span>
</label>
input[type="checkbox"] {
appearance: none;
/* ... */
}
input[type="checkbox"]:checked { /* ... */ }
input[type="checkbox"]:indeterminate { /* ... */ }
input[type="checkbox"]:disabled { /* ... */ }
- extra88 5y agoThat's good to keep in mind. No IE support for `appearance` but it can be used in such a way that it's just a more ordinary input in that browser. There are still more things you can do within a label. This is a good article on improving methods of visually hiding the actual inputs. https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/ https://www.sarasoueidan.com/blog/inclusively-hiding-and-sty...