Zero Trickery Custom Radios and Checkboxes

Screen-Shot-2021-11-14-at-12.43.57-PM.png

I feel like half of all “custom-designed radio buttons and checkboxes” do two things:

  1. Make them bigger
  2. 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:

Zero Trickery Custom Radios and Checkboxes 1
SurveyMonkey’s implementation appears to be pseudo-elements on a <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 up and colorize them pretty good!

Zero Trickery Custom Radios and Checkboxes 2
Firefox
Zero Trickery Custom Radios and Checkboxes 3
Chrome

Except (obligatory sad trombone) in Safari:

Zero Trickery Custom Radios and Checkboxes 4
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.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on twitter
Share on linkedin
Share on email