Wie füge den text "ON" und "OFF" Umschalten-Taste
Auf mein Projekt wollte ich hinzufügen, dass ein text über meine vorhandene toggle-code.Also ich wollte wie dieser, Wenn schaltet er anzeigen soll, den text "ON" und zeigt die "OFF" - Texte wenn ein-bzw. ausgeschaltet. Ich kann es nicht ändern, zum anderen Umschalten, weil es bereits eine backend verwenden. Ich wollte einfach nur zur Eingabe von "ON" und "OFF" - text. Danke.
Hier ist mein code
HTML:
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></span></div></label>
CSS:
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
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 sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
- hier ist der code mit Beispiel. aspdotnetkhan.com/toggle-switch-68.aspx
Du musst angemeldet sein, um einen Kommentar abzugeben.
Könnte man es so machen:
CSS:
HTML:
Oder pure CSS:
CSS:
HTML:
em
s für die Dimensionierung und so wie es leichter reagieren: jsfiddle.net/d0g4tbcjCSS:
HTML:
Inhalt wie pro Ihre Wahl, wo Sie witten "On" und "Off"
versuchen, diese