Zero Trickery Customized Radios and Checkboxes

No Comments

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

Make them biggerColorize them

I at all times consider SurveyMonkey for having huge chunky radios and checkboxes. And certainly, simply poking at their interface rapidly, even internally, the app makes use of has these far and wide:

SurveyMonkey’s implementation seems to be pseudo-elements on a <label> factor with icon fonts and such.

I believe it’s price noting that if that’s all you’re doing, you would possibly have the ability to do this with zero CSS trickery. Simply… make them greater and colorize them.


enter[type=”checkbox”] {
width: 3em;
top: 3rem;
accent-color: inexperienced;

That’ll chunk these suckers up and colorize them fairly good!


Besides (compulsory unhappy trombone) in Safari:


We’re so shut to having some quite simple CSS to perform the principle use-case for {custom} checkboxes and radios. However no cigar, that’s, except you possibly can carry your self to only not care concerning the Safari UI (it is nonetheless completely purposeful, in any case).

Should you do want to surrender and go for a very {custom} design, Stephanie Eckles has received you lined:

Pure CSS Customized Styled Radio ButtonsPure CSS Customized Checkbox Fashion

In associated information, I at all times consider a “toggle” UI management as a set of two radio buttons progressively enhanced, however it seems <button> is the best way, as Michelle Barker covers right here. No native UI for slider toggle thingies, alas.

The submit Zero Trickery Customized Radios and Checkboxes appeared first on CSS-Methods. You’ll be able to help CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment