Customized radio buttons

Victoria Mineva
11-07-2016

For my latest project I had to create styling for some custom radio buttons. I was able to do that by the use of the :checked pseudo-class in CSS3. In this blog post I will give you a aimple example of a way you can style a list of radio buttons.

The HTML

Let’s start by creating the HTML for our list of radio buttons. In an unordered list we will add an input of type radio and a label with a name. Here is what the HTML looks like:

<ul>
  <li>
    <input type="radio" name="options" id="option1" value="1" />
    <label for="option1">Option 1</label>
  </li>
  <li>
    <input type="radio" name="options" id="option2" value="2" />
    <label for="option2">Option 2</label>
  </li>
  <li>
    <input type="radio" name="options" id="option3" value="3" />
    <label for="option3">Option 3</label>
  </li>
</ul>

The default styling of the radio buttons wouldn’t look nice on a modern website so now it’s time to add some custom styling to make out buttons look good.

The CSS

Let’s start by removing the bullets from our unordered list. We will also add some padding for the list items so that there’s space in between our radio buttons:

ul {
  list-style: none;
}

li {
  padding: 10px 0;
}

Now we can proceed to add the styling for our radio buttons. First we will remove the default blue circle on the left side of each radio button. We can do that with the following lines of css:

input[type="radio"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

For this example I chose to give my radio buttons a custom image of a circle that replaces the default one. There will also be a second image to be used when the radio button is selected. Here is the css that I used in order to do that:

input[type="radio"] + label {
  display: inline-block;
  background: url('unchecked.png') no-repeat;
  background-size: 20px 20px;
  margin-left: -20px;
  padding-left: 30px;
  line-height: 20px;
  cursor: pointer;
}
    
input[type="radio"]:checked + label {
  background: url('checked.png') no-repeat;
  background-size: 20px 20px;
}

The end result looks something like this:

Screen Shot 2016-07-08 at 10.22.44 AM

By the use of the :checked and :before pseudo-classes you can also create custom circles for the radio buttons with css only and style them in any way you like. The exact same way is also used to change the default styling of checkboxes.

LEAVE A REPLY

you might also like