Home / Articles / Programming languages / Markup languages / HTML & CSS / Styling checkboxes and radio buttons using CSS3

Styling checkboxes and radio buttons using CSS3

Styling checkboxes and radio buttons using CSS3
Styling checkboxes and radio buttons using CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.

This article describes, in a simple way, how to style checkboxes and radio buttons using only CSS3.

Below you can see HTML code of two radio buttons and checkboxes.

<h3>Radio buttons</h3>
<div class="radio">
  <input id="radio-1" type="radio" name="Data1" value="agree" checked />
  <label for="radio-1">Yes</label>
  <input id="radio-2" type="radio" name="Data1" value="disagree" />
  <label for="radio-2">No</label>
<div class="checkbox">
  <input id="checkbox-1" type="checkbox" name="Data2" value="option1" checked />
  <label for="checkbox-1">HTML</label>
  <br />
  <input id="checkbox-2" type="checkbox" name="Data3" value="option2" />
  <label for="checkbox-2">CSS</label>

The following CSS styles are divided into parts to show how radio buttons and checkboxes change every time a new part of style (or several of them) is added and applied.


CSS code

Step 1

This is how it looks like without styles.

Step 2
label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 28px;
  margin-right: 12px;
  font-size: 16px;
  line-height: 22px;
  font-weight: bold;
Step 3
input[type=checkbox] {
  display: none;

label:before {
  font-weight: normal;
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #1ABFE5;
  box-shadow: inset 0px 2px 3px 0px #10758C;
Step 4
.radio label:before {
  border-radius: 10px;

.checkbox label:before {
  border-radius: 3px;
Step 5
input[type=radio]:checked + label:before {
  content: '\2022';
  color: #f3f3f3;
  font-size: 32px;
  text-align: center;
  line-height: 20px;

input[type=checkbox]:checked + label:before {
  content: '\2713';
  text-shadow: 1px 1px 1px #10758C;
  font-size: 24px;
  color: #f3f3f3;
  text-align: center;
  line-height: 24px;

These styles have one big disadvantage, a tick (a.k.a check mark) might not work in some browsers. Instead, it may look like a Chinese block, this means that the tick was not recognized. To solve this, an image of a tick has to be used in styles.

Only the content (CSS property) from the previous example must be replaced with the following:


CSS code

Improved styles
input[type=checkbox]:checked + label:before {
  content: url( checkmark.png );

Also text-shadow CSS property can be removed from styles with the selector "input[type=checkbox]:checked + label:before", because it works only with text, in case when an image of a tick is used, it's useless.

Live demo


Read also

Checkboxes in HTML

Checkboxes in HTML

Radio button in HTML

Radio button in HTML

Simple CSS3 gallery with zoom effect

Simple CSS3 gallery with zoom effect

Creating CSS3 button with rounded corners

Creating CSS3 button with rounded corners

Discussion (total 2 comments)

February 04, 2017 at 11:46 pm
thanks for this colossal revealing website, living up the massive undertaking check out this <a href=http://onlinecasinos-x.com>online casino</a> offers
February 06, 2017 at 07:48 pm
thanks due to the fact that this significant illuminating website, living up the skilled jobless check out this <a href=http://onlinecasinos-x.com>online casinos</a> offers

Post comment


Quick navigation

General navigation