Bedazzling Radio Buttons and Checkboxes

Because your browser’s default styling is just too ugly.

So you’ve added a form to your HTML and put in some radio buttons or checkboxes but the results are visually… meh:

The view is not much better on other browsers either.



Not only is the default style meh, but so is the UX (tech industry lingo for “user experience”), particularly the IxD (tech industry lingo for “interaction design”). In order to select an option, users have to click on a tiny little button next to the text. That is asking for a lot more mouse accuracy and patience than some users have even when sober.

How do you go from ‘meh’ to ‘wow’? Use CSS! One caveat though: You cannot simply define a style for ‘input’. You can try, but even if you do this…

input {
color: red;
background-color: yellow;

You will still get this…

No red or yellow to be seen. The browser sticks to its default blue. Bleh. Follow these steps instead.

Step 1: Hide the original

In your CSS, set the display property on your form inputs to none. Yes, lock them up in the basement like that malformed illegitimate child.

input[type="checkbox"], input[type="radio"]  {

Step 2: Set up your form to accept input from a proxy

In your HTML, add <label> tags to the text of each option. Each label should have a “for” attribute that matches the id of the corresponding input:

<input type="checkbox" id="option1" />
for="option1">Option 1</label>
<input type="checkbox" id="option2" />
for="option2">Option 2</label>
<input type="checkbox" id="option3" />
for="option3">Option 3</label>

This way, when you click on the label text “Option 1”, the checkbox you hid in Step 1 gets selected. You can’t see it, but the checkbox has an imaginary checkmark inside it now. The label has become the proxy for the checkbox or radio button.

Step 3: Style your CSS

Back in your CSS, you can now style your label. Alternatively, you can put each label inside a span and style the span. Tip: Add styles for the :hover, :active and :checked states so the user knows which option they are selecting.

label {
font-family: sans-serif;
color: salmon;
label:hover {
color: grey;


Step 4: Add a dummy radio button or checkbox

Now you can add your own radio buttons or checkboxes and make ’em bigger and better. In your HTML, add a new div to each option. This div will hold the new checkbox or radio button you create.

<div class="check"></div>

In your CSS, add a style or image for your custom checkbox or radio button. Here are some for inspiration or roll your own. Don’t forget to add styles for different states, such as :hover or :selected.

.check {
display: inline-block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 10%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;

And voila!

An improvement over the browser default! Not “wow” enough for you? Well, beauty is in the eye of the beholder. Go back to your CSS and style things ’til you get to your vision of “wow”.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.