Styling Radio and Check buttons with CSS
Let’s face it, at some point you look at a radio or a checkbox button and you’re like… this looks like something that starts with an “s” and ends with a “hit”. I’m here to stop you from saying that word and go on with your life without worrying about those ugly things.
We’re just going to use code here. No images, just pure scalable user interface using code. Cool, eh? Let’s get started.
Let’s create our code structure first.
If it looks ugly, don’t be alarmed. That’s normal for an untamed code from the wild. All you gotta do now is to tame it with our very best tool, CSS.
First thing you have to do is to hide the element that generates the hideous button, which is… DUN DUN DUN… the input tag. Don’t worry, we can still trigger it even though it’s hidden. How? by nesting it inside the label tag.
Now that the default toggles are gone, we need to create our fake —but amazing— toggles.
We can’t really customize this toggle that much because it needs other toggles to work properly. Let’s just prettify it a bit.
By now it should like this.
This one is fun to customize because it has an on and off feature or a switch. Let’s start with a simple toggle. We’re going to transform this hideous toggle (screenshot) to this beautiful creature (screenshot).
Oh yes! Beautiful toggle.
Have you ever seen those toggles where it slides to the left and right when you click it? Did you know you can do that too using CSS? Let’s try it.
First, we’re going to design the default look of an unchecked checkbox. By now you know that we need to hide the default toggle.
And then add a space on the left of the span using padding. While you’re there, add a position relative to because we need to contain the rest of the elements inside the span.
Now, let’s create our toggles using CSS pseudo element :before and :after. Why? Because generated CSS is easier to handle.
This will generate a box looking element. Since it’s targeting both pseudo elements, they will look identical and on top of each other.
It’s time to start prettifying those pseudo elements.
For :after, since this is the background where the :before toggle slides through. We need to modify the width to look bigger. Add an inset shadow to make it look like it’s pushed through and a red background for an “off” effect.
For :before, we just need to make it look like a circle and lift it off a bit using box-shadow.
The “on” part just needs a little bit of pushing to the side and changing the background to blue or green.
The CSS is a bit longer here because there’s a lot of elements that need to change, but take a chill pill because CSS won’t slow your page down.
And that’s it. Your pretty checkbox or radio button toggles.