Styling native Checkboxes and Radio inputs (CSS Only)

So, do you want to style native radio and checkboxes without relying on JavaScript, plugins or dozens of wrappers, is that right? Well, thats possible :)

The provider of all that magic is the appearance css property. The appearance is used to apply or remove a system-native style to/from a web element.

Here's a link to know more about:
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance.

But if you take a look on the 'Can i use' you may note that this property is only well supported when setting its value to "none", and thats exactly what we need . This is because the different apperance values may show different results depending on your system and browser engine, but all the browsers suport the appearance:none very well because there is no secret, it just removes the element native style. So, for that purpose, we have a good support.

https://caniuse.com/#search=appearance

Another thing that worth to say: The appearance cares ONLY about the element style. That means that if i set appearance: none to a checkbox, the element is still a checkbox, but without any appearance (system style). The opposite is also valid, giving an element appearance: button, for example, will not turn that element in a button, the element will only have the button appearance.

This is how we must use this property.

.element {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

Coding

Now lets code. The idea its very simple, we will remove the checkbox and radio inputs native style and apply our own. If the browser doesn't support the appearance selector there is no harm, the native checkboxes and radios will be used instead. This is the result:

First lets remove the checkboxes and radios appearance

[type=radio],
[type=checkbox] {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

Now we will apply our appearance. You can combine the above properties and this ones in a single selector, but lets split it to the sake of the post:

[type=radio],
[type=checkbox] {
  width: 20px;
  height: 20px;
  border: solid 1px #cccccc;
  margin-right: 8px;
  position: relative;
}

Now lets say how we want our elements to be when they are checked. Remember: we removed the appearance, not the behavior. The ideia here is, when the element is checked we will use a ::before (pseudo-element) to fill the empty space. Thats why our element is setted to position: relative, because the ::before will be absolutely placed inside it, giving the "checked" appearance.

[type=radio]:checked::before,
[type=checkbox]:checked::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #ffa500;
  position: absolute;
  top: 2px;
  left: 2px;
}

And finally, lets round the radio corners to differentiate them from the checkboxes:

[type=radio],
[type=radio]:checked::before{
  border-radius: 100%;
}

Thats all, folks. Now we have our styled checkboxes and radio inputs 🎉

Cover image by Nadine Shaabana on Unsplash.

Comments

[Omar Bourhaouta]

It looks great, for me to have a more natural css toggles I always add cursor: pointer and user-select: none to the label.

In the demo, if you click on the radio button it'll check the checkbox above, if you could fix the for attributes.

[Felippe Regazio]

Nice tunes. But adding the user select none leads to some usability benefit or is pure aesthetic? Im asking in case someone wants to copy the text on the label, that should be a valid situation, maybe.

And must be some issue with input names. I'll fix it for sure, thanks for the notice :)

[Omar Bourhaouta]

It's just pure aesthetic, avoiding selecting the text after a double-click.

I tend to think about toggles as buttons, as the text in it won't be selectable because it's not interesting to be selected.

It's just my opinion.

[Felippe Regazio]

Nice, is definitely a good point. I also like to bind label+checkbox as as a button, but I don't usually add user-select:none. Ill adopt it for some situations,thanks!

[Davide Scarioni]

Awesome, I did't know about the appearance property, I always use display: none to hide the original checkbox and radio button. Thank you!

[Pradeep Chavan]

Thanks. Very Helpful.

[danielskiala]

thank you so much