How to determine the 'toggle' status of a CSS toggle input?

Tags: html,css,toggle

Problem :

I would like to implement a CSS-based toggle/switch input. I found the example of the following link which is really easy and not using javascript at all. The problem is that it's lacking the explanation of how to determine the 'toggle' status

This is the full code for reference:

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;

input:checked + .slider {
  background-color: #2196F3;

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
<!-- Rounded switch -->
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>

Solution :

For some reason, I didn't tried the simple solution.. well it's working now :)


    CSS Howto..

    How to set a dynamic CSS value with JavaScript

    (HTML/CSS) How do I repeat items like on Google or Reddit?

    How to space children evenly horizontally in css

    How to create a triangle in CSS3 using border-radius

    How to find the proper offsets for CSS sprites?

    How to change nested divs within a named div to display as display:inline using CSS or jQuery selectors?

    Using CSS, how can I style a div tag to full the width, even when the viewport is scaled?

    How to display heading and paragraph elements inline in css?

    How to get two results with one button using CSS & Jquery

    How to make HTML pages print at a consistent size from Chrome?

    How do I control a css child property with javascript?

    How to restrict the contents in a table data() of a table to a certain limit?

    How can I remove comments on-fly from my static CSS files?

    How to implement block style for list

    Show div when hover another div using only css

    How can I apply mobile css query to my div with background image?

    How to format f.submit with css, glyphicons, and symbol?

    How to implement geometric div backgroud shapes in css

    How to change image size on featured images in wordpress?

    How to Align a Link HTML/CSS

    How to inject javascript var into css

    CSS: Double-Border, how to [duplicate]

    CSS how to make icons look like they are inside the backround

    How can I position my navigation bar further up on the page?

    How to reject specify HTML tags by using css or xpath selector

    How to darken a CSS background image?

    How to create a custom vaadin component in vaadin 6

    How can I get a box shadow to start below a thick border?

    How to display only the first few lines of a div (clamping)?

    How to add CSS to all tds of a particular tr in jQuery?