What makes HTML element animate on click event without JavaScript? - html

Question

My question may be stupid but please I need an explanation. I found both html and CSS code to implement ON and OFF switcher but I really don't understand how the label animate is possible without javaScript using a click event.
can someone explain to me the trick in this code.
I have never seen this before
HTML:
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
CSS:
<style>
.onoffswitch {
position: relative; width: 109px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
height: 30px; padding: 0; line-height: 16px;
border: 2px solid #999999; border-radius: 3px;
background-color: #EEEEEE;
transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
content: "OFF";
display: block; width: 16px; margin: 0px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 91px;
border: 2px solid #999999; border-radius: 5px;
padding:5px;
width:30px;
text-align:center;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #00CED1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #00CED1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
content: "ON";
padding:5px;
width:30px;
text-align:center;
}
</style>
Thank you.

Answer 1

When a label element is clicked, it activates its labelled element. In this case the labelled element is a checkbox.
This causes the checkbox to toggle its checked property (not attribute*).
The :checked pseudo-selector will match input[type="checkbox"] or input[type="radio"] elements that have their checked property in the true state.
The change in the :checked status allows the new CSS properties to be applied to the label because the entire selector chain subsequently matches (or no longer matches, depending on whether the checkbox is now checked or unchecked).
The CSS transition rule then animates the changed properties from one state to the other.
Here's a simple demo of a form that can be used to test the functionality of labels on various different field types. Note that the submit button won't work due to the form being in a sandboxed <iframe>.
<form action="http://example.com" target="_blank" method="get">
<p>
<label for="text">text</label>
<input type="text" name="text" id="text">
</p>
<p>
<label for="select">select</label>
<select name="select" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</p>
<p>
<label for="textarea">textarea</label>
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
</p>
<p>
<label for="checkbox">checkbox</label>
<input type="checkbox" name="checkbox" id="checkbox" value="checked">
</p>
<fieldset>
<legend>radio buttons</legend>
<p>
<label for="radio-1">radio 1</label>
<input type="radio" name="radio" id="radio-1" value="1">
</p>
<p>
<label for="radio-2">radio 2</label>
<input type="radio" name="radio" id="radio-2" value="2">
</p>
</fieldset>
<p>
<label for="reset">reset</label>
<input type="reset" id="reset" value="Reset">
</p>
<p>
<label for="button">button</label>
<button id="button" type="submit">Submit</button>
</p>
</form>
* so why is it important that the property is changed but not the attribute? When you use a reset button (input[type="reset"], or button[type="reset"]), the form will be reset to whatever the values of the HTML attributes (or innerHTML for <textarea>) are for each field. You can test this by using JavaScript to modify the value attribute of a text field and then resetting the form to see that no change happens.