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
 
  • 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>
<h3>Checkboxes</h3>
<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>
</div>

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.

Appearance

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=radio],
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:

Appearance

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

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation