Please, enter a valid email!

How the Styling of CSS Radio Button is Made? [CSS Tricks]

We're all familiar with HTML checkbox and CSS radio button. 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!


Making Your Website Responsive. What Are Your Options? [Free Ebook]


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.


CSS Radio Button

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:

See the Pen
Radio buttons and check boxes 2
by Matthew Cain (@matthewcain)
on CodePen.


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.






HTML5 Website Templates

Cryptocurrency Wallet Website Template - HTML5

Demo | Download | Hosting


NFT Marketplace HTML5 Website Template and Mobile App Design

Demo | Download | Hosting


Pet Store Responsive Website Template

Demo | Download | Hosting


Techtiq - Responsive Multipurpose Website Template

Demo | Download | Hosting


Themexp - Corporate Responsive Website Template

Demo | Download | Hosting


Trendy Gambling and Betting Website Template

Demo | Download | Hosting


Universal CMS Template - Bootstrap | Laravel Framework Website Template

Demo | Download | Hosting


Wedding Hut Website Template

Demo | Download | Hosting


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


FAQ

What is the CSS style checkbox?

It is a little interactive element that could be toggled by the user to make a choice among two or more variants. Sometimes it is also called a selection box or tick box.

What is the CSS style radio button?

It is an element the user can interact with to make a single choice of several options. Unlike checkbox, it allows choosing only one option among the offered.

Why do I need to style the checkboxes and radio buttons in CSS?

Oh, come on, it will be better if the interactive elements fit the other parts of the design, isn’t it? Every tiny detail could be crucial for the general look.


Read Also


Matthew Cain

I like to create websites from the ground up, coding them carefully with HTML and CSS. Sometimes even the best and professionally created templates need some coding tricks. And here is my Quora account.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

19 responses to “How the Styling of CSS Radio Button is Made? [CSS Tricks]”

  1. Liked this script. Thanks for tutorial

  2. shibi says:

    love it! thank you so much!

  3. Peter says:

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

  4. Andy says:

    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!

  5. NotMyTempo says:

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

    • Matthew Cain says:

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

      • Tim says:

        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.

  6. justin says:

    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.

    • Matthew Cain says:

      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

  7. justin says:

    I love it! thank you so much!

  8. Mike Snyder says:

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

  9. susan2011 says:

    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

    • justin says:

      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
      });

    • Matthew Cain says:

      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 🙂

  10. NenN NelsoN says:

    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…

    • Matthew Cain says:

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

  11. Jep says:

    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 🙂

Leave a Reply

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