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 6 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
Alexandra_Rootourofueli
February 01, 2017 at 06:39 am
<h1>Солнце предотвращает рак кожи, а не вызывает его.</h1>
<p>
С 80-х годов прошлого столетия доктора многих стран мира периодически предостерегают общество о возможной угрозе прямых солнечных лучей для здоровья кожи человека.<br>
В итоге особо, мнительная публика, боясь солнечного света, прячутся в одежку в период с мая по сентябрь, либо наносят на тело, как мы выражаемся, косметическую продукцию с УФ-защитой.<br>
Мотивация одна – понижение риска появления меланомы. Но недавние изучения английских экспертов демонстрируют, что конкретно такое поведение, увеличивает шанс развития меланом.<br>
Нельзя не отметить - изыскания профессионалов из института Лидса, что высочайшие уровни витамина D понижают шансы злокачественных болезней кожи. Конечно же, не все мы знаем то, что остальные изучения подтвердили связь мощного иммунитета и витамина D.<br>
Как показали эксперименты, это вещество способно предотвращать возникновение опухолевых клеток и, мягко говоря, усилить их гибель.<br>
Как не прискорбно, у многих современных людей подмечен недостаток витамина D, что увеличивает риск большого количества небезопасных болезней, таких как:<br>
-рак предстательной железы;<br>
-рахит;<br>
-остеопороз;<br>
-рак кишечного тракта;<br>
-рак шейки матки, иных органов.<br>
Само-собой разумеется, отметила доктор института молекулярной медицины Лидса - Юлия Ньютон Бишоп, сниженное наличие у организма человека витамина D типично для нынешнего сообщества, не зависимо от страны проживания.<br>
Хочется также подчеркнуть - не только солнечный свет содействует увеличению в организме витамина D, но и некоторые продукты питания, например жирная рыба способствует также увеличению витамина D в организме человека.
<a href=http://sergeevka.in.ua>отдых в Сергеевке</a>
</p>
Winstonirold
February 04, 2017 at 05:58 pm
thanks for this great revealing website, obstruct up the massive position check out this <a href=http://onlinecasinos-x.com>online casinos</a> offers
Winstonirold
February 06, 2017 at 04:11 pm
thanks due to the fact that this countless edifying website, finance up the skilled undertaking check out this <a href=http://onlinecasinos-x.com>casino</a> offers
Winstonirold
February 13, 2017 at 08:43 am
thanks due to the fact that this countless informative website, keep up the massive jobless check out this <a href=http://onlinecasinos-x.com>casino</a> offers

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation