0
Ich möchte einen CSS-basierten Toggle/Switch-Eingang implementieren. Ich fand das Beispiel des folgenden Links, der wirklich einfach ist und überhaupt kein Javascript benutzt. Das Problem ist, dass es die Erklärung, wie ist fehlt die 'Toggle' Status bestimmenWie kann ich den Umschaltstatus einer CSS-Toggle-Eingabe ermitteln?
http://www.w3schools.com/howto/howto_css_switch.asp
Dies ist der vollständige Code als Referenz:
/* 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>
</label>