Re:HTML and CSS techniques to reduce your JavaScript
by runarberg on Friday June 04, 2021 @01:09PM
(#27395893)
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 { /* ... */ }
Re:HTML and CSS techniques to reduce your JavaScript
by extra88 on Friday June 04, 2021 @02:27PM
(#27397145)
That'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-sty...
Yes, like aria-expanded="true" on a <button> that opens a custom disclosure widget instead of using the CSS-only :checked ~ .foo hack I was responding to. The actual hiding/revealing of the related content can still be done with CSS alone using [aria-expanded="true"].
Here's a bunch of checkbox hack examples [0]. The custom radio buttons and checkboxes and the push toggles are fine (the use-case is fine, I didn't closely examine everything about the implementations), the rest should be done some other way that probably involves buttons with JavaScript.
[0] https://css-tricks.com/the-checkbox-hack/