Style Checkbox and Radio Inputs with CSS

CSS helps us to style almost all HTML tags. But styling Checkbox and Radio input was not easy before. We had to use Javascript to customize them. If Javascript is disabled, the given style for Checkbox or Radio input will stop showing. Do we want to let it happen? No, right?

We can style them with CSS only, which is easy to customize, browser compatible and also very friendly for responsive layout.

So, let’s get started.

HTML Markup:

We have to keep in mind that the label will be placed after input tag and the id of the checkboxes or radios will have to match the ‘for’ attribute of the following label.

Checkbox:

<input class=”customRC” type=”checkbox” id=”newsletter” >
<label class=”customRC” for=”newsletter”>
    <span>&nbsp;</span>I’d like to receive newsletter
</label>

Radio Input:

<input class=”customRC” type=”radio” id=”male” name=”sex” >
<label class=”customRC” for=”male”> 
    <span>&nbsp;</span>Male
</label>
<input class=”customRC” type=”radio” id=”female” name=”sex” >
<label class=”customRC” for=”female”> 
    <span>&nbsp;</span>Female
</label>

CSS:

input.customRC {
  position: absolute;
  opacity: 0;
}
label.customRC {
  display: block;
  position: relative;
  margin-bottom: 4px;
  padding-left: 35px;
  font-size: 20px;
  line-height: 27px;
  font-weight: 400;
  color: #5a5959;
  cursor: pointer;
}
label.customRC span{
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  background: #f2f2f2 url(YOUR CUSTOM IMAGE) center center no-repeat;
  background-size: 0 auto;
  border: 1px solid #c6c4c4;
}
input.customRC:checked + label.customRC span{
  background-size: 14px auto;
}
input.customRC:focus + label.customRC span,
input.customRC:hover + label.customRC span{
  border-color: #014692;
}

Why are we not using CSS before/after Pseudo-Elements?

CSS before/after Pseudo-Elements work perfect in Firefox only. It works on other browser as well, but they show some alignment issues. To solve those issues we need to write specific browser hacks.

If we have different sizes of the checkboxes or radios for different resolution then it becomes hard to write CSS hack.

Same goes for using before/after Pseudo-Elements with CSS ‘content’ property.

In a word, this is the easiest way to style checkbox and radio input.

DEMO:

Thanks.