CSS Tutorials

How To Make Stylish Checkboxes And Radio Buttons With CSS3

4.66/5 (59)

We're all familiar with HTML checkboxes and radio buttons. The most frustrating thing about them is that there's no way for us to change the way they look. They look in a different way depending on your operating system and browser, and we can't style them using CSS.

This can be annoying for most designers, who want to make those elements appealing so that they don't spoil the design. In this tutorial, I'll show you how to make them look really cute with a simple trick. Let's dig in!



Be Strong. Hide Your Checkboxes

This may sound counterintuitive, but to make our checkboxes and radio buttons look great, we have to hide them and forget about them! Yes, there's no need for them to stick around anymore, so we just apply a simple rule:

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}

But Matthew, you might say, what are we going to do without them? No worries, we'll build our own checkboxes, with blackjack and… well, let's just get into it.

Radio Buttons

First, there's our markup:

<section id="first" class="section">
    <div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-2">
      <label for="radio-2"><span class="radio">Tea</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-3">
      <label for="radio-3"><span class="radio">Cappuccino</span></label>
    </div>
</section>

We have a section, where we're going to contain three radio buttons. We'll cover checkboxes further in this tutorial, the principle is the same. Each input is wrapped into a div with a container class. Also, each input has a label with a span in it.

Important!

Since we've hidden the radio and checkbox inputs, the only way for us to access them would be by using a label tag. To work properly the label tag has to contain the "for" attribute with an ID of corresponding input. If an input has an ID "radio-1", then the "for" attribute should also be "radio-1".

You might be wondering why did I wrap the text inside each label into a span:

<div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
</div>

Since we're going to style radio buttons with "::before and "::after pseudo-elements, we need a parent element, based on which they can be positioned. In this case, it will be our label:

.container label {
  position: relative;
}

Here is a set of styles which is shared among both checkboxes and radio buttons:

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Top and bottom properties set to zero and combined with "margin: auto;" allow our elements to have a centred horizontal position.

Here's how the rest of the styles look like:

.container span.radio:hover {
  cursor: pointer;
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

The most important part is the last set of rules, which basically does the whole trick. The ":checked" pseudo-class allows us to make changes to elements when the input is checked. With a '+' selector we can choose the next sibling element, and target our "span.radio", where we apply new rules to the "::after" pseudo-element. In this case, we change its horizontal position and the colour.

In order to make the switch smooth, we assign the transition of 0.25 seconds to the left property and background-colour. Now when we click on the radio button, the switch is moving smoothly instead of jumping quickly.

Checkboxes

If you need to create custom checkboxes, the method is the same. Take a look at the styles:

.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

The only difference is that we're using an icon from the FontAwesome family as our "::after" pseudo-element. By default it's transparent, but when the checkbox is checked, the icon becomes blue.

Aside

If you want to use a FontAwesome icon in your pseudo-element, you have to include its code in the content property, and specify the font-family property as "FontAwesome". For example:

{
content: '\f00c';
font-family: 'FontAwesome';
}

The code "f00c" is preceded by a backslash, which is required to escape the Unicode character. The Unicode can be found on the page of your chosen icon:

A FontAwesome icon page with a unicode character

Final Result

That's it. Now we've created fully-functional and beautiful checkboxes and radio buttons, which you can tweak and use for your own projects. You can view the full source code in the CodePen demo:

Video tutorials

It is better to see once than to read multiple times. Some people prefer to look over the professional's shoulder, so I picked 5 best (in my opinion, certainly) video tutorials about creating custom checkboxes and radio buttons. Hope that'll help.






If you find this tutorial useful or have any questions, feel free to share your thoughts in the comments below. Thanks!

17 Responses

  1. Great post Matthew! What I find very helpful is that you add stylings step by step and explain what it does in between. I’ve learned something today 🙂

    1. You’re welcome, Jep! I’m glad you found my tutorial useful 🙂

  2. Wow, thank you so much for the sharing, the touch to flat design is incredible but I prefer no rounded borders, so I did a little change…

    1. Sure, that’s what it’s all about, I provide an example and you customize it to your needs 🙂 Glad you liked it!

  3. Hi Everyone,
    I am graphically illiterate (ie no idea how to do this stuff). However, I would like to send a friend an email (or document) with and ‘yes’ and ‘no’ check box but where it’s impossible to check the ‘no’ box. I think I’ve seen this on some joke thing ages ago – when trying to check the ‘no’ box it moves….

    Any ideas about how I can do this?
    Thank you

    1. LOL! Just use a static image, that would be the easiest. In jQuery javascript you would do something like this

      $(‘input[“type=checkbox”]’).bind(‘click’, function(e) {
      e.preventDefault(); // this ignores the default behavior of selecting the checkbox
      });

    2. Email is a tricky medium for tweaking the elements, mainly because not every email client supports the newest CSS rules. Probably indeed the best solution would be to send a static image 🙂

  4. Great tutorial. Are you thinking of improving this for accessibility (i.e. keyboard navigation)?

    1. Hey Mike, I’m happy you like it! That’s a great idea, I’ll consider it for my future publications.

  5. how can we use the radio toggle design for checkboxes? I just want a yes and no slide toggle. Sure I will figure it out on my own soon, after scouring the web for an hour.

    1. Hi Justin!

      Thanks for finding my article useful, and sorry for my late response. Here’s what you need to do in order to achieve the effect you’re looking for:

      1. Locate the block with styles for radio buttons (it’s commented out as /* Radio buttons */) and replace each occurrence of “radio” with “checkbox”.
      2. Find the style section with checkboxes /* Check-boxes */ and remove it OR if you want to keep the styles, rename the checkbox class to “radio” and the effect will be replaced.

      Hope this helps!

      Best,
      Matthew

  6. “Be Strong. Hide Your Checkboxes” and say good by to the keyboard.

    1. Yeah, that sucks.. Sometimes we have to choose the lesser of the two evils.

      1. If you use “opacity: 0” instead of “display: none”, the checkbox/radio is still technically there on the page. For bonus points, you could position it over the top of the simulated controls so that (in some cases) the user is still interacting with the original input.

  7. Hi, Thanks for the great ideas, really useful. Doesn’t this break most client side validation as the focus can’t be set to the input element as it’s not visible. With z-index instead of display none you could probably get round that.

    Thanks again for the tutorial!

  8. How would you get/set the value of a checkbox or catch the onChange event?

Leave a Reply

Your email address will not be published. Required fields are marked *