Because CSS currentColor value and pseudo elements make a damn good team.
Well, I didn’t know about CSS
currentColor keyword until a while ago. I’ve started playing around with it and yeah, this is extremely powerful. Some really say that this is the first CSS variable that ever existed, sounds pretty interesting huh?
So, I thought that making some nice custom form controls with pseudo elements and currentColor might be the best possible scenario. With that in mind, I chose to style some radios and checkboxes.
The markup for a custom radio or checkbook consist of a
label that wraps both the
input and the proper text. As you already know, wrapping everything together this way, will allow you to improve the usability for it, without needing to rely on the
The radio markup is similar to above.
Further, I will try to explain a bit almost every single rule of CSS used for this demo. It’s not rocket science but I hope you will find it useful.
box-sizing: border-box is very useful and demos like the current one are way easier to build with this piece of CSS magic.
.form-group is applied to the HTML label that wraps both checkbox or radio and text respectively. It has a
pointer style because you may want to add a small usability touch by showing the user that this element is actionable.
Also, in case you were wondering about the
user-select: none; declaration, unfortunately that’s not a standard CSS3 feature and its behavior might change in the future. For now, it’s just a cool method of preventing text selection using CSS.
In this case, we’ll customize the radios and checkboxes appearances using pseudo elements, so we’ll have to somehow hide the native form controls. The following is one of the most appropriate solution because it avoids using stuff like
display: none or
visibility: hidden, stuff that might affect the accessibility.
Now, the following CSS rules are basically preparing the ground for what’s going to happen next. The
.form-control has a
relative positioning because its pseudo elements will be
You might note the
em units too. Well, using these units allow the form controls to be scaled up and down, based on your
font-size preferences. And that’s pretty cool.
Thanks to Thierry, who wrote me on Twitter about the redundant
currentColor value in this case
border: .1em solid currentColor;. After all, the
border-color is inherited from the parent. Doh! :)
The main trick here is to use the already well known “check” HTML entity, represented by Unicode
U+2714. Also, for both checkboxes and radios, we’re using adjacent sibling selectors in order to get the toggling behavior.
Everything else is just CSS poetry.
When it comes to the radio form element, we rely heavily on the border property to achieve the desired effect. A bit of
border-radius for roundness, some
background-clip to prevent the background expanding underneath its border and we’re almost there.
Still, the CSS VIP in here is the
A small JS snippet
Browser support limitations
This does not work on older browsers like IE8 and below, but a decent fallback for IE8 can easily be made with a bit of effort.
Otherwise, it works just fine on other modern devices and browsers, as far as I tested. Just hit me up if you noticed something weird.
That’s pretty much it
Let me know your thoughts, thanks for reading!