DEV Community

Cover image for Pure CSS Custom Styled Radio Buttons

Pure CSS Custom Styled Radio Buttons

Stephanie Eckles on July 14, 2020

This is the eighteenth post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend d...
Collapse
 
alvaromontoro profile image
Alvaro Montoro

Notice that with the default printing settings, backgrounds are removed. If a user prints a page with these radio buttons, they won't be able to know which one was checked. (Inset) Box-shadows are not removed at printing, and they will a similar effect to the radial background.

Collapse
 
5t3ph profile image
Stephanie Eckles

Good tip, it's easy to forget about the scenario of a page being printed!

Collapse
 
5t3ph profile image
Stephanie Eckles

Updated with an alternate option that swaps to use of box-shadow - thanks again!

Collapse
 
mrgrigri profile image
Michael Richins

It would be nice to see the upcoming 'lh' and 'rlh' CSS length values. That way the radio's height and width can be set to 1lh which will align it properly. Look at this blog post regarding the soon-to-be unit.

Collapse
 
5t3ph profile image
Stephanie Eckles

Great thought, I look forward to updating the recommendation in this post when that has better support! You could certainly define it following the em definition to prepare for it being available 👍

Collapse
 
mrgrigri profile image
Michael Richins

Yeah...definitely a future idea.

Collapse
 
paintedsky_ca profile image
PaintedSky

Just to clarify, you're using SCSS not pure CSS here right? I noticed the nested selectors and was kinda confused for a moment there... hehe

Collapse
 
5t3ph profile image
Stephanie Eckles

Ah, you got me on a technicality - that's correct. I need to remember to add a note 😉 But it's not using any special features of Sass so it's still true, ha!

Collapse
 
frse97 profile image
Sebastian Fries

Great Tips! I wanted to ask if you have planned to make an article also on the different input types. I'm struggling with input color and such a good explanation would be helpful 😊

Collapse
 
5t3ph profile image
Stephanie Eckles

Thanks! Yes, I will also be covering the other varieties of input and textarea as well as select

Collapse
 
frse97 profile image
Sebastian Fries

Ok awesome :)

Collapse
 
urielbitton profile image
Uriel Bitton

very interesting post thanks for this! :)

Collapse
 
cooljasonmelton profile image
Jason Melton

This rules. Thanks Stephanie

Collapse
 
5t3ph profile image
Stephanie Eckles

🙌