Heim >Web-Frontend >CSS-Tutorial >Erstellen eines Stilschalters mit reinem CSS mit: Überprüfung
Erstellen eines Stilschalters mit reinem CSS mit: Überprüfung
- 尊渡假赌尊渡假赌尊渡假赌Original
- 2025-02-24 08:23:10142Durchsuche
Vor einigen Jahren konnten Webentwickler so viele Dinge nur mit CSS implementieren und aufbauen, ohne sich auf JavaScript zu verlassen. Aber heute ist CSS ausgereift genug, dass es in der Lage ist, mächtige Dinge zu tun, ohne eine einzige Zeile von JavaScript zu schreiben. Möglicherweise haben Sie auch ein paar Artikel über „CSS nur Ansätze“ gelesen, die die Kraft von CSS demonstrieren.
Wenn es um CSS-Ansätze geht, können wir den: Checked Pseudo-Klasse-Selektor, den ich in diesem Beitrag verwenden werde, nicht ignorieren. Natürlich bin ich nicht der erste, der über diese Technik schreibt, und es gab andere umfangreichere Diskussionen über die Verwendung von Formularelementen als JavaScript -Ersatz. Zum Beispiel diesen Adobe -Artikel von Louis Lazaris und diese große Diashow von Ryan Seddon.
Key Takeaways
- Der: Überprüfte Pseudo-Klasse-Selektor in CSS kann verwendet werden, um einen Style-Switcher zu erstellen, ohne eine JavaScript-Zeile zu schreiben. Es wählt ein Radio- oder Kontrollkästchen -Element aus, das überprüft oder ausgewählt wird.
- Der: Checked Pseudo-Klasse-Selektor funktioniert in Verbindung mit Eingangs- und Etikettenelementen. Das Attribut "für" im Beschriftungselement, wenn Sie klicken, wählt das zugehörige Eingangselement aus oder überprüft, wodurch die Verwendung des geprüften Selektors verwendet wird.
- Die CSS -Position: Fixed ’Deklaration zusammen mit den Eigenschaften" Top "und" Recht "kann verwendet werden, um Elemente auf der Seite zu positionieren. Die Eigenschaft "Z-Index" sorgt dafür, dass die Etiketten auf der Seite über alle anderen Elemente bleiben. Der: Überprüfte Selektor der Pseudoklasse kann verwendet werden, um den Hintergrund eines Elements zu ändern, Inhalte auszublenden oder anzuzeigen oder andere Stile anzuwenden, basierend auf der Benutzerinteraktion mit dem zugeordneten Etikettelement.
- Der: Checked Pseudo-Klasse-Selektor arbeitet mit dem benachbarten Geschwisterauswahl () und dem allgemeinen Geschwisterauswahl (~) zusammen und ermöglicht die Interaktion zwischen verschiedenen Elementen auf der Seite. Diese Technik kann verwendet werden, um eine Vielzahl interaktiver Funktionen auf einer Webseite zu erstellen.
Kurz gesagt, der geprüfte Pseudoklasse-Selektor repräsentiert (ausgewählt) jedes Radio- oder Kontrollkästchen-Element, das überprüft oder ausgewählt ist. Der Benutzer kann den Status dieser Elemente ändern, indem er ein Kontrollkästchen überprüft oder einen anderen Wert in einer Reihe von Quartierschaltflächen auswählt.
Bevor wir tiefer tauchen, schauen Sie sich die letzte Demo an, um ein Gefühl dafür zu bekommen, was wir in diesem Tutorial aufbauen werden:
Siehe den Stift A Style Switcher mit reinem CSS mit: Überprüfung von SitePoint (@sinepoint) auf CodePen.
Jetzt fangen wir an.
Erstellen des Einstellungsfelds
In der Demo sollten Sie das Ausrüstungssymbol bemerkt haben und wie beim Klicken ein Feld mit einigen Optionen angezeigt wird. Bevor wir die HTML und CSS erklären, die diese Box ausmachen, schauen Sie sich den folgenden Code an:
<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span> <span>position: absolute;
</span> <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span> <span>z-index: 10;
</span><span>}</span>
Da wir nur daran interessiert sind, die Beschriftungen anzuzeigen, wird der obige Code verwendet, um die Kontrollkästchen und Optionszahlen auszublenden. Darüber hinaus verfügen alle Etiketten über eine Klasse von Einstellungen-Box-Elementen mit einer Z-Index-Eigenschaft, um sicherzustellen
Jetzt können wir den Code, aus dem das Einstellungsfeld besteht, aufschlüsseln. Beginnen wir mit dem Ausrüstungsknopf. Hier ist das HTML:
<span><!-- the gear icon that opens the box when you click on it --> </span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span> </span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>und das CSS:
<span><span>.settings-btn + label</span> {
</span> <span>position: fixed;
</span> <span>top: 130px;
</span> <span>right: 0;
</span> <span>display: block;
</span> <span>width: 35px;
</span> <span>color: #e83737;
</span> <span>text-align: center;
</span> <span>background: #fff;
</span> <span>cursor: pointer;
</span><span>}</span> Wenn Sie ein oder zwei Artikel über die Verwendung von Formularelementen als JavaScript -Austausch gelesen haben, sollten Sie bereits wissen, dass wir gemeinsam Eingabe- und Beschriftungselemente verwenden müssen, sodass nichts funktionieren würde, wenn einer der beiden entfernt würde, nichts funktionieren würde. Wir haben also eine Checkbox -Eingabe mit einem und ein Etikett mit einem für Attribut, das dem ID -Wert entspricht. Ich habe auch eine Klasse von Einstellungen hinzugefügt, die für unseren CSS-Hook verwendet werden. In der CSS erhält die Etikett eine Position: Feste Deklaration mit den entsprechenden Richtungseigenschaften/-werten (oben und rechts).
Weiter ist das weiße Box, das
praktisch die Schaltflächen enthält:
Die HTML zuerst:
<span><!-- the white box that contains the buttons --> </span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>und das CSS:
<span><span>.buttons-wrapper</span> {
</span> <span>position: fixed;
</span> <span>top: 130px;
</span> <span>right: -200px; /* should match element width */
</span> <span>width: 200px;
</span> <span>height: 240px;
</span> <span>background: #fff;
</span><span>}</span> Das Box ist ein einzelnes Div-Element mit Klassen "Schaltflächen-Wrapper" und "Einstellungen-Box-Element". Wie ich bereits sagte, wird die letztere Klasse hauptsächlich verwendet, um den Elementen einen Z-Index-Wert zu geben. Mit dem „Buttons-Wrapper“ wird das Div-Element gestaltet. Und wie Sie sehen können, erhielt die DIV eine Breite von 200px und eine Höhe von 240px, um die 5 Tasten, die Sie in der Demo sehen, aufzunehmen. Außerdem erhält der DIV einen Positionswert von festen und entsprechenden Rechts- und Top -Eigenschaften. Das einzige, was Sie hier beachten müssen, ist, dass die richtige Eigenschaft den gleichen Wert wie die Breite haben sollte, aber negativ (um sie aus dem Ansichtsfenster verschwinden zu lassen). Schauen wir uns nun den Code für das verbleibende Markup an, dh die 5 Tasten. Die Kommentare bezeichnen die Hintergrundstile, die sie kontrollieren:
<span><!-- background styles --> </span><span><!-- light background (#eaeaea) --> </span><span><span><span><input</span> id<span>="light-layout"</span> class<span>="light-layout"</span> type<span>="radio"</span> name<span>="layout"</span> checked></span> </span><span><span><span><label</span> for<span>="light-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span> </span>Light Background<span><span><span></label</span>></span> </span> <span><!-- dark background (#494949) --> </span><span><span><span><input</span> id<span>="dark-layout"</span> class<span>="dark-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span> </span><span><span><span><label</span> for<span>="dark-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span> </span>Dark Background <span><span><span></label</span>></span> </span> <span><!-- image background --> </span><span><span><span><input</span> id<span>="image-layout"</span> class<span>="image-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span> </span><span><span><span><label</span> for<span>="image-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span> </span>Image Background<span><span><span></label</span>></span> </span> <span><!-- pattern background --> </span><span><span><span><input</span> id<span>="pattern-layout"</span> class<span>="pattern-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span> </span><span><span><span><label</span> for<span>="pattern-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span> </span>Pattern Background<span><span><span></label</span>></span> </span> <span><!-- hide/show content --> </span><span><span><span><input</span> id<span>="hide-show-content"</span> class<span>="hide-show-content"</span> type<span>="checkbox"</span>></span> </span><span><span><span><label</span> for<span>="hide-show-content"</span> class<span>="layout-buttons settings-box-element"</span>></span> </span>Hide/Show content<span><span><span></label</span>></span></span>Und hier ist das CSS:
<span><span>.layout-buttons</span> {
</span> <span>display: block;
</span> <span>width: 150px;
</span> <span>padding: 10px 0;
</span> <span>text-align: center;
</span> <span>border: 2px solid black;
</span> <span>box-sizing: border-box;
</span> <span>font-size: 0.875em;
</span> <span>cursor: pointer;
</span><span>}
</span>
<span><span>.light-layout + label</span> {
</span> <span>position: fixed;
</span> <span>top: 140px;
</span> <span>right: -150px;
</span><span>}
</span>
<span><span>.dark-layout + label</span> {
</span> <span>position: fixed;
</span> <span>top: 185px;
</span> <span>right: -150px;
</span><span>}
</span>
<span><span>.image-layout + label</span> {
</span> <span>position: fixed;
</span> <span>top: 230px;
</span> <span>right: -150px;
</span><span>}
</span>
<span><span>.pattern-layout + label</span> {
</span> <span>position: fixed;
</span> <span>top: 275px;
</span> <span>right: -150px;
</span><span>}
</span>
<span><span>.hide-show-content + label</span> {
</span> <span>position: fixed;
</span> <span>top: 320px;
</span> <span>right: -150px;
</span><span>}</span> Beachten Sie, dass das erste Kontrollkästchen das Attribut "Checked" erhielt. Das liegt daran, dass wir wollen, dass es standardmäßig hervorgehoben wird. Jedes Eingabefeld verfügt über eine ID und jedes Etikett hat ein für Attribut, das der ID für eines der Eingabefelder entspricht. Und wie Sie vielleicht wissen oder nicht, ist das Geheimnis hinter einer solchen Technik das für Attribut, denn wenn ein Etikett mit einem für Attribut angeklickten Element angeklickt wird, wird das Element, das dieser bestimmten Etikett zugeordnet ist Um den: Checked Selector zu verwenden.
Alle oben genannten Beschriftungen haben eine Klasse von "Layout-Buttons". Diese Klasse wird verwendet, um den Schaltflächen die Standardeinstellung und die gängigen Stile wie Breite, Polsterung, Ränder usw. zu verleihen Und wie Sie für das Zahnradsymbol und die weiße Box gesehen haben, wird die Position der Position mit dem Wert festgelegt und den entsprechenden oberen und rechten Eigenschaften verwendet. Beachten Sie, dass der oberste Wert für jedes Etikett 45px größer ist als der vor ihm; Dies soll die Tasten übereinander und ohne Überlappungen übereinander stapeln lassen. Beachten Sie auch, dass der richtige Eigenschaftswert der Breite der Schaltflächen entspricht, jedoch im negativen.
Schauen Sie sich jetzt den letzten Teil unseres CSS -Code an:
<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span> <span>position: absolute;
</span> <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span> <span>z-index: 10;
</span><span>}</span>
Das obige CSS wird verwendet, um die Standardstile des Etiketts zu ändern, das dem ausgewählten Optionsfeld zugeordnet ist (wir haben 4 Optionsfelder). Ich habe den benachbarten Geschwisterauswahl verwendet, um jedes Etikett zu zielen, dem ein Eingabefeld vom Typ „Radio“ vorausgeht. Wie Sie sehen können, erhielten die Hintergrund- und Randeigenschaften den Wert Nr. E83737 (eine rötliche Farbe) und die Farbeigenschaft der Wert #FFF. Nichts wirklich ausgefallenes oder komplexes.
Die verbleibenden Elemente in der HTML werden in eine DIV eingewickelt:
<span><!-- the gear icon that opens the box when you click on it --> </span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span> </span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>
Beachten Sie im obigen Code, dass ich jedes Element des Einstellungsfelds unabhängig voneinander positioniert habe, wo ich sie einfach alle in ein Div- oder Abschnitt -Element einwickeln und dieses eine einzelne Element positionieren kann, wodurch die Dinge einfacher werden. Dies geschieht einfach, weil Sie kein übergeordnetes Element auswählen können, nur ein Geschwister.
In diesem Fall ist der gesamte Hauptinhalt in einem DIV mit einem DIV eingewickelt. Und wie Sie später sehen werden, müssen wir diese DIV auswählen, indem wir etwas Ähnliches wie folgt schreiben:
<span><span>.settings-btn + label</span> {
</span> <span>position: fixed;
</span> <span>top: 130px;
</span> <span>right: 0;
</span> <span>display: block;
</span> <span>width: 35px;
</span> <span>color: #e83737;
</span> <span>text-align: center;
</span> <span>background: #fff;
</span> <span>cursor: pointer;
</span><span>}</span>
Hier verwende ich den allgemeinen Geschwister -Selektor, um die Hauptdiv auszuwählen. Dies ist die einzige Möglichkeit, dies zu tun.
Klicken Sie auf das Zahnradsymbol
Wenn Sie auf das Zahnradsymbol klicken, wird das Feld Einstellungen angezeigt. Hier ist der Code, um dies zu erreichen:
<span><!-- the white box that contains the buttons --> </span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>
Wenn der Benutzer auf das Zahnradsymbol klickt, wird das Kontrollkästchen mit ausgewählt und hier kommt die Magie. Sobald das Zahnradsymbol geklickt ist, wird Folgendes geschehen:
-
Verwenden des benachbarten Geschwister -Selektors (), dem Etikett, das sofort kommt.
Verwenden des allgemeinen Geschwisterauswahls das Ansichtsfenster -
sowohl der angrenzende Geschwisterauswahl als auch der allgemeine Geschwisterauswahl sind hier unverzichtbar, da diese Technik ohne sie nicht funktioniert.
Lassen Sie mich Sie an den HTML -Code für die Optionsfelder erinnern:
<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span> <span>position: absolute;
</span> <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span> <span>z-index: 10;
</span><span>}</span>
Der Hintergrund, den wir ändern werden, ist der Hintergrund des Main-Wrapper-Elements. Hier ist das CSS:
<span><!-- the gear icon that opens the box when you click on it --> </span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span> </span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>
Sie können sehen, dass wir in der HTML 4 Eingabeelemente von Typ = "Radio" und 4 Labels haben. Wenn eines der Beschriftungen angeklickt wird, wird die Eingabe, die dieser bestimmten Etikett zugeordnet ist, ausgewählt und daher mit der geprüften Pseudoklasse übereinstimmt. Je nachdem, auf welcher Etikett geklickt wird, wird einer der oben genannten vier Stile auf die Hauptverpackung angewendet.
Versteck/Zeigen von Inhalten
Für das Element anzeigen/ausblenden verwende ich ein Kontrollkästchen:
<span><span>.settings-btn + label</span> {
</span> <span>position: fixed;
</span> <span>top: 130px;
</span> <span>right: 0;
</span> <span>display: block;
</span> <span>width: 35px;
</span> <span>color: #e83737;
</span> <span>text-align: center;
</span> <span>background: #fff;
</span> <span>cursor: pointer;
</span><span>}</span>
Und hier ist das CSS:
<span><!-- the white box that contains the buttons --> </span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>
In diesem Fall sagen wir dem Browser, das Element mit und festlegen, dass es auf die Anzeige angezeigt wird, wenn der Benutzer auf die zugehörige Beschriftung klickt, wodurch das Kontrollkästchen ausgewählt wird.
Schlussfolgerung
Es gibt viele andere Dinge, die Sie mit dieser Auswahltechnik tun können, und die Grenze ist Ihre eigene Kreativität. Wenn diese Technik für Sie neu ist, hoffe ich, dass dieser Artikel als Ausgangspunkt für Sie dienen kann, um mit anderen Möglichkeiten zu experimentieren.
unten finden Sie die abgeschlossene Demo:
Siehe den Stift A Style Switcher mit reinem CSS mit: Überprüfung von SitePoint (@sinepoint) auf CodePen.
häufig gestellte Fragen (FAQs) zum Erstellen eines Stilschalters mit reinem CSS mit checked
Was ist der Zweck der: geprüften Pseudoklasse in CSS? oder Optionselemente, die vom Benutzer ausgewählt wurden. Es ist ein leistungsstarkes Tool, mit dem Entwickler interaktive und dynamische Webseiten erstellen können, ohne dass JavaScript erforderlich ist. Zum Beispiel kann es zum Erstellen eines Style Switlers verwendet werden, bei dem Benutzer das Erscheinungsbild einer Webseite durch Auswahl verschiedener Optionen ändern können. : Checked Pseudo-Klasse funktioniert, indem die derzeit ausgewählten oder überprüften HTML-Elemente ausgewählt werden. Es wird normalerweise mit Formularelementen wie Kontrollkästchen oder Optionsfeldern verwendet. Wenn ein Benutzer eines dieser Elemente auswählt oder überprüft, wird die geprüfte Pseudoklasse aktiv und wendet die angegebenen CSS-Stile auf dieses Element an. Dies kann verwendet werden, um die ausgewählte Option hervorzuheben, Inhalte anzeigen oder auszublenden oder sogar das gesamte Layout einer Webseite zu ändern. > Die: Checked Pseudo-Klasse wird hauptsächlich mit Formularelementen wie Kontrollkästchen, Optionsschaltflächen und Optionselementen verwendet. Es kann jedoch auch mit anderen Elementen in Kombination mit dem HTML5 -Attribut „inhaltlich“ verwendet werden. Auf diese Weise können Sie interaktive Inhalte erstellen, die vom Benutzer bearbeitet werden können, und ihn anders zu stylen, wenn er sich im Status "geprüft" oder "ausgewählt" befindet.
Wie kann ich mit der geprüften Pseudo-Klasse einen Style-Switcher erstellen? Kontrollkästchen für jede Stiloption. In Ihrem CSS verwenden Sie dann die: geprüfte Pseudo-Klasse, um verschiedene Stile anzuwenden, je nachdem, welche Option ausgewählt ist. Dies könnte das Ändern des Farbschemas, der Schriftart, des Layouts oder eines anderen Aspekts des Erscheinungsbilds der Webseite beinhalten. : Überprüfte Pseudo-Klasse kann verwendet werden, um dynamische Inhalte zu erstellen. Durch Kombinieren mit anderen CSS -Selektoren und -eigenschaften können Sie Inhalte anzeigen oder ausblenden, das Layout ändern oder interaktive Funktionen basierend auf den Auswahlen des Benutzers erstellen. Dies kann die Benutzererfahrung erheblich verbessern und Ihre Webseiten ansprechender und interaktiver gestalten. Von der: Checked Pseudo-Klasse ermöglicht es Ihnen, interaktive Funktionen zu erstellen, ohne dass JavaScript erforderlich ist. Während JavaScript ein leistungsstarkes Tool für die Webentwicklung ist, kann es auch komplex und schwierig zu bedienen sein. Die: Checked Pseudo-Klasse bietet eine einfachere Alternative zum Erstellen interaktiv Alle modernen Browser, einschließlich Chrom, Firefox, Safari und Edge. Es wird jedoch in Internet Explorer 8 oder früheren Versionen nicht unterstützt. Wenn Sie diese älteren Browser unterstützen müssen, müssen Sie möglicherweise stattdessen eine auf JavaScript-basierte Lösung verwenden. > Ja, die: Überprüfte Pseudoklasse kann verwendet werden, um Kontrollkästchen und Optionsfelder zu stylen. Standardmäßig haben diese Formularelemente ein sehr grundlegendes Erscheinungsbild, aber mit der geprüften Pseudoklasse können Sie ihr Erscheinungsbild so anpassen, dass sie den Rest Ihrer Website entsprechen. Sie können die Farbe, Größe, Form und sogar die Animation dieser Elemente ändern, wenn sie ausgewählt werden. Überprüfte Pseudoklasse wird üblicherweise verwendet, um interaktive Funktionen wie Stilschalter, Akkordeons, Registerkarten und Modale zu erstellen. Es kann auch verwendet werden, um Formularelemente wie Kontrollkästchen und Optionsschaltflächen zu stylen oder mit dem Attribut "Inhaltlich" bearbeitbare Inhalte zu erstellen. Die Fähigkeit, auf die Benutzereingabe zu reagieren, macht es zu einem leistungsstarken Tool zur Verbesserung der Benutzererfahrung. Gibt es Einschränkungen oder Nachteile für die Verwendung der geprüften Pseudoklasse? Es kann nur Elemente auswählen, die derzeit ausgewählt oder überprüft werden, sodass es nicht verwendet werden kann, um Elemente basierend auf anderen Zuständen oder Bedingungen zu stylen. Darüber hinaus wird es in Internet Explorer 8 oder früheren Versionen nicht unterstützt. Trotz dieser Einschränkungen ist es immer noch ein wertvolles Tool zum Erstellen interaktiver und dynamischer Webinhalte.
Das obige ist der detaillierte Inhalt vonErstellen eines Stilschalters mit reinem CSS mit: Überprüfung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!