Home / Articles / Programming languages / Markup languages / HTML & CSS / Styling checkbox as toggle button using only CSS3

Styling checkbox as toggle button using only CSS3

Styling checkbox as toggle button using only CSS3
 
Styling checkbox as toggle button using only CSS3
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (1 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 demonstrates how to style regular HTML checkboxes as toggle buttons using only CSS3 without JavaScript.

HTML structure is very simple. For one toggle button you'll need: input element (HTML checkbox) and label element with i element inside.

There is only one important thing which you have to know about HTML structure, the label element has two additional attributes: data-text-true and data-text-false. These attributes are used by CSS styles to display the title in the toggle button with two states: checked and not checked.

HTML code for one toggle button (checkbox):

<input id="checkbox1" type="checkbox" checked>
<label for="checkbox1" data-text-true="Yes" data-text-false="No"><i></i></label>
Do you want to learn CSS?

CSS styles:

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  display: inline-block;
  background-color: #DB574D;
  color: white;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  position: relative;
  text-transform: uppercase;
  width: 80px;
}

input[type=checkbox] + label,
input[type=checkbox] + label i {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

input[type=checkbox]:checked + label {
  background-color: #67B04F;
}

input[type=checkbox] + label:before,
input[type=checkbox] + label:after,
input[type=checkbox] + label i {
  width: 50%;
  display: inline-block;
  height: 100%;
  text-align: center;
}

input[type=checkbox] + label:before {
  content: attr(data-text-true);
}

input[type=checkbox] + label:after {
  content: attr(data-text-false);
}

input[type=checkbox] + label i {
  top: 10%;
  background-color: white;
  height: 80%;
  left: 5%;
  position: absolute;
  width: 45%;
}

input[type=checkbox]:checked + label i {
  left: 50%;
}

Live demo

The following archive contains the example above:


 

Read also

CSS3: multiple backgrounds

CSS3: multiple backgrounds

CSS3: Progressive Internet Explorer (PIE)

CSS3: Progressive Internet Explorer (PIE)

Discussion (total 2 comments)

Olaolu Olawuyi
Olaolu Olawuyi
July 22, 2014 at 08:23 am
tanx very much nice code for acheckbox and i also love the design.#Whizkydee
Michael
August 31, 2015 at 11:00 am
Nice effect but it misuses the label element, which should be used to describe the purpose of the input field. From an accessibility standpoint the check box has a empty label. You can tweak it to make it more accessible and maintain the effect plus get the add bonus of being able to click on the label text to enact the effect. http://codepen.io/Mash19/pen/QjWGdG

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation