Heim > Artikel > Web-Frontend > Wie erstelle ich einen Umschalter mit HTML und CSS?
Wie erstelle ich einen Umschalter mit HTML und CSS?
- WBOYnach vorne
- 2023-08-25 18:02:091566Durchsuche
In HTML und CSS ist ein Kippschalter ein grafisches Benutzeroberflächenelement, das es dem Benutzer ermöglicht, zwischen zwei Zuständen zu wechseln (normalerweise „Ein“ und „Aus“). Kippschalter werden durch die Verwendung eines HTML-Eingabeelements vom Typ „Checkbox“ und eines entsprechenden Label-Elements mit CSS-Stil erstellt. Das Label-Element ist so gestaltet, dass es den Status „Ein“ anzeigt, wenn der Eingang ausgewählt ist, und das Label-Element ist so gestaltet, dass es den Status „Aus“ anzeigt, wenn der Eingang nicht ausgewählt ist.
Wenn wir unserer Website coole interaktive Funktionen hinzufügen möchten, sind Umschalter eine gute Wahl. Hier erfahren Sie, wie Sie mithilfe von HTML und CSS einen Umschalter erstellen.
Der erste Schritt beim Erstellen eines Kippschalters besteht darin, die Grundstruktur des Schalters mithilfe von HTML zu erstellen. Dies können wir erreichen, indem wir ein div-Element als Container verwenden und zwei Eingabeelemente hinzufügen, um den Ein-/Aus-Zustand des Schalters darzustellen.
HTML-Code
Dies ist ein Stück HTML-Code.
<html>
<body>
<h3>Toggle Switch Example</h3>
<div class="toggle">
<input type="checkbox" id="toggle-checkbox" class="togglecheckbox">
<label for="toggle-checkbox" class="toggle-label"></label>
</div>
</body>
</html>
Jetzt müssen wir den Kippschalter mit CSS formatieren. Setzen Sie zunächst die Anzeigeeigenschaft des Container-Div auf „inline-block“ und stellen Sie die Breite und Höhe des Schalters auf eine für Ihre Website oder Anwendung geeignete Größe ein. Wir verwenden auch die Eigenschaft border-radius, um eine kreisförmige Form für den Schalter zu erstellen.
Wir fügen dem Label-Element ein Pseudoelement hinzu und setzen dessen Inhalt auf eine leere Zeichenfolge. Wir werden ihm außerdem eine Hintergrundfarbe geben und es vollständig innerhalb des Containers positionieren. Wenn das Kontrollkästchen aktiviert ist, verschieben wir das Pseudoelement nach rechts, um den Ein-Zustand des Kippschalters anzuzeigen.
Durch die Verwendung des :checked-Selektors in CSS können wir die Position der weißen Hintergrundfarbe ändern, wenn der Schalter aktiviert ist, und so einen sanften und optisch ansprechenden Übergang erzeugen. Wir können das Erscheinungsbild des Schalters auch mithilfe anderer CSS-Eigenschaften wie Hintergrundfarbe, Schriftgröße und Textausrichtung anpassen.
CSS-Code
Hier ist der CSS-Code.
<style>
body{
text-align:center;
}
.toggle {
display: inline-block;
width: 80px;
height: 38px;
background-color: #8eeb60;
border-radius: 40px;
position: relative;
overflow: hidden;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle-label {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 34px;
}
.toggle-label:before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: red;
border-radius: 34px;
position: absolute;
top: 0;
left: 0;
transition: all 0.25s ease-in-out;
}
.toggle-checkbox:checked+.toggle-label:before {
transform: translateX(35px);
}
</style>
Beispiel 1
Hier ist ein Beispiel für die Erstellung eines Kippschalters mit HTML und CSS.
<html>
<head>
<style>
body{
text-align:center;
}
.toggle {
display: inline-block;
width: 80px;
height: 38px;
background-color: #8eeb60;
border-radius: 40px;
position: relative;
overflow: hidden;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle-label {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 34px;
}
.toggle-label:before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: red;
border-radius: 34px;
position: absolute;
top: 0;
left: 0;
transition: all 0.25s ease-in-out;
}
.toggle-checkbox:checked+.toggle-label:before {
transform: translateX(35px);
}
</style>
</head>
<body>
<h3>Toggle Switch Example</h3>
<div class="toggle">
<input type="checkbox" id="toggle-checkbox" class="toggle-checkbox">
<label for="toggle-checkbox" class="toggle-label"></label>
</div>
</body>
</html>
Beispiel 2
Hier ist ein weiteres Beispiel für die Erstellung eines Kippschalters mit Hilfe von HTML und CSS.
<html>
<head>
<style>
body{
text-align:center;
}
.toggle {
position: relative;
display: block;
width: 100px;
height: 40px;
padding: 3px;
margin: auto;
border-radius: 50px;
cursor: pointer;
}
.toggle-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.toggle-label {
position: relative;
display: block;
height: inherit;
font-size: 12px;
background: red;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 3px
rgba(0, 0, 0, 0.15);
}
.toggle-label:before,
.toggle-label:after {
position: absolute;
top: 50%;
color: black;
margin-top: -.5em;
line-height: 1;
}
.toggle-label:before {
content: attr(data-off);
right: 11px;
color: #fff;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.toggle-label:after {
content: attr(data-on);
left: 11px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.toggle-input:checked~.toggle-label {
background: green;
}
.toggle-input:checked~.toggle-label:before {
opacity: 0;
}
.toggle-input:checked~.toggle-label:after {
opacity: 1;
}
.toggle-handle {
position: absolute;
top: 4px;
left: 4px;
width: 38px;
height: 38px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
border-radius: 50%;
}
.toggle-handle:before {
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 16px;
height: 16px;
}
.toggle-input:checked~.toggle-handle {
left: 64px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition*/
.toggle-label,
.toggle-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
</style>
</head>
<body>
<h3>Toggle Switch by using HTML and CSS</h3>
<label class="toggle">
<input class="toggle-input" type="checkbox" />
<span class="toggle-label" data-off="OFF" data-on="ON"></span>
<span class="toggle-handle"></span>
</label>
</body>
</html>
Fazit
Das Erstellen eines Umschalters mit HTML und CSS ist ein einfacher Vorgang, der Ihrer Website oder App viel Wert verleihen kann. Indem wir diese Schritte befolgen und mit verschiedenen CSS-Eigenschaften experimentieren, können wir einen einzigartigen, optisch ansprechenden und benutzerfreundlichen Kippschalter erstellen.
Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Umschalter mit HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Wie kann verhindert werden, dass Chrome auf Android die Schriftgröße automatisch anpasst?
- Wie kann ich mit SASS dynamische Hintergrundbilder für eine Fußzeile erstellen?
- Border: None oder Border: 0 – Welches ist die bessere Wahl zum Entfernen von Elementrändern in CSS?
- Wie kann ich die tatsächliche Schriftart ermitteln, die in einer CSS-Deklaration in verschiedenen Browsern verwendet wird?
- Wie bestimmen CSS „Min-Content“ und „Max-Content“ die Elementabmessungen?