Zero Trickery Custom Radios and Checkboxes
Publikováno: 18.11.2021
I feel like half of all “custom-designed radio buttons and checkboxes” do two things:
- Make them bigger
- Colorize them
I always think of SurveyMonkey for having big chunky radios and checkboxes. And indeed, just poking at their interface quickly, even …
The post Zero Trickery Custom Radios and Checkboxes appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
I feel like half of all “custom-designed radio buttons and checkboxes” do two things:
- Make them bigger
- Colorize them
I always think of SurveyMonkey for having big chunky radios and checkboxes. And indeed, just poking at their interface quickly, even internally, the app uses has those all over the place:
<label> element with icon fonts and such. I think it’s worth noting that if that’s all you are doing, you might be able to do that with zero CSS trickery. Just… make them bigger and colorize them.
Like…
input[type="radio"],
input[type="checkbox"] {
width: 3em;
height: 3rem;
accent-color: green;
}That’ll chunk those suckers upand colorize them pretty good!
Except (obligatory sad trombone) in Safari:
We’re so close to having some very simple CSS to accomplish the main use-case for custom checkboxes and radios. But no cigar, that is, unless you can bring yourself to just not care about the Safari UI (it is still perfectly functional, after all).
If you do need to give up and go for a completely custom design, Stephanie Eckles has got you covered:
In related news, I always think of a “toggle” UI control as a set of 2 radio buttons progressively enhanced, but it turns out <button> is the way, as Michelle Barker covers here. No native UI for slider toggle thingies, alas.
The post Zero Trickery Custom Radios and Checkboxes appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.