In HTML und CSS können Sie eine einfache Umschalttaste (oder Toggle-Schalter) erstellen, indem Sie Checkbox- und Label-Elemente verwenden und diese mit CSS formatieren.
Hier ist ein einfaches Beispiel, wie das in der Praxis funktionieren könnte:
HTML:
```html
```
CSS:
```css
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: “”;
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
```
Diese CSS-Toggle-Schalter-Implementierung enthält eine glatte Animation, die den Schalter erscheinen lässt, als würde er verschoben, wenn er auf “Checked” umgestellt wird. Die Farbe des Schiebereglers ändert sich auch, um eine Umschaltung zwischen Zwei-Zuständen zu signalisieren.
Beachten Sie bitte, dass dieser Code nur für Präsentationszwecke dient und in der Praxis je nach spezifischen Anforderungen und Browser-Kompatibilitätsbedenken angepasst werden muss.
JavaScript oder ein anderer geeigneter Sprache benötigt, um die Funktion “onchange” oder “onclick” zu handhaben, je nach dem was Sie erreichen möchten, wenn der Benutzer auf den Schalter klickt.
