Accentsconagua
Share
Haben Sie sich jemals gefragt, wie Sie Kontrollkästchen und Optionsfelder gestalten können, aber ohne JavaScript? Dank CSS3 können Sie! Hier ist, was wir bauen werden (Hinweis: Um zu erfahren, wie Sie diese zugänglich machen, lesen Sie auch dieses Tutorial.):
Wenn Sie nach Grafiken suchen, die Sie mit Ihren Formular-UI-Elementen verwenden können, werfen Sie einen Blick auf die von Envato Elements verfügbaren UI-Kits. Ansonsten nehmen Sie eine Tasse Kaffee und beginnen Sie mit diesem Tutorial!
Literatur-Empfehlungen: Die 30 CSS-Selektoren, die Sie sich merken müssen
Für diejenigen von Ihnen, die sich bereits in Ihren CSS-Fähigkeiten sicher fühlen und nur einen Anstoß in die richtige Richtung wünschen, ist hier die wichtigste CSS-Zeile im gesamten Tutorial:
Eingabe [Typ = "Ankreuzfeld"]: geprüft + Beschriftung
Nun, für diejenigen von Ihnen, die das Gefühl haben, dass Sie mehr Anleitung brauchen, fürchten Sie sich nicht, lesen Sie weiter!
Okay, jetzt zurück zum Thema. Was genau werden wir tun? Nun, wegen CSS3s schickem wenig : geprüft Mit dem Pseudo-Selektor können wir ein Element basierend auf seinem aktivierten (oder nicht aktivierten) Status anvisieren. Wir können dann die verwenden + benachbarter Geschwister-Selektor aus CSS2.1, um das Element direkt nach der Checkbox oder dem Radio anzuvisieren, was in unserem Fall das Label ist.
Jetzt beginnen wir mit dem Erstellen unserer HTML- und CSS-Dateien (oder wie Sie es bevorzugen, Ihre Stile zu handhaben) und machen uns an die Arbeit. Ich gehe davon aus, dass Sie wissen, wie das geht, damit wir uns nicht darauf einlassen müssen.
Um Sie auf den Weg zu bringen, werde ich diese Technik nur an einem Kontrollkästchen demonstrieren, aber der Vorgang für die Optionsfelder ist identisch und in der Quelle enthalten.
Okay, dann fangen wir eigentlich an, oder? Wir beginnen mit der Erstellung unserer Checkbox-Eingabe, gefolgt von einem Label.
Nur für den Fall, dass Sie nicht viel über das wissen Element müssen Sie die Eingabe und das Label verbinden, damit Sie über das Label mit der Eingabe interagieren können. Dies geschieht mit, für = "" und die ID der Eingabe.
Ich werde auch eine hinzufügen innerhalb des Etiketts, was mehr persönliche Vorlieben ist als alles andere, aber alles wird in Schritt 3 deutlich.
Hier beginnt der Spaß. Das erste, was wir als Basis für dieses Tutorial machen, ist das eigentliche Kontrollkästchen auszublenden.
Eingabe [Typ = "Ankreuzfeld"] Anzeige: keine;
Nachdem dies erledigt ist, können wir die Beschriftung neu gestalten, insbesondere aber die Spannweite innerhalb der Beschriftung. Ich mache es so, um mir mehr Kontrolle über die genaue Position des Kontrollkästchens zu geben. Andernfalls würden Sie wahrscheinlich ein Hintergrundbild direkt in der Beschriftung verwenden, und das Positionieren kann schwierig werden.
Eingabe [Typ = "Ankreuzfeld"] Anzeige: keine; Eingabe [Typ = "Ankreuzfeld"] + Label Span Anzeige: Inline-Block; Breite: 19px; Höhe: 19px; Hintergrund: URL (check_radio_sheet.png) links oben keine Wiederholung;
Okay, lass mich das schnell erklären. Beachten Sie zunächst den Hintergrund. Ich habe ein kleines Sprite-Blatt für diese, also muss ich nur die Hintergrundposition auf dieser Spanne einstellen. Die Spannweite selbst ist die exakte Breite und Höhe jedes "Sprites" im Arbeitsblatt, so dass jeder Zustand leicht definiert werden kann.
Unser Spriteblatt Hier ist der Rest des CSS, spezifisch für mein Styling. Dies ist rein ästhetisch und spezifisch für meinen Geschmack oder dieses Design.
Eingabe [Typ = "Ankreuzfeld"] Anzeige: keine; Eingabe [Typ = "Ankreuzfeld"] + Label Span Anzeige: Inline-Block; Breite: 19px; Höhe: 19px; Marge: -2px 10px 0 0; vertikal ausrichten: Mitte; Hintergrund: URL (check_radio_sheet.png) links oben keine Wiederholung; Cursor: Zeiger;
Es gibt nicht mehr viel Arbeit, also lassen Sie uns das einpacken. Als letztes müssen Sie einen Status für das Element angeben, wenn die Eingabe geprüft wird, und optional auch für den Hover. Das ist ganz einfach, schauen Sie doch mal rein!
Eingabe [Typ = "Ankreuzfeld"] Anzeige: keine; Eingabe [Typ = "Ankreuzfeld"] + Label Span Anzeige: Inline-Block; Breite: 19px; Höhe: 19px; Marge: -2px 10px 0 0; vertikal ausrichten: Mitte; Hintergrund: URL (check_radio_sheet.png) links oben keine Wiederholung; Cursor: Zeiger; Eingabe [Typ = "Ankreuzfeld"]: markiert + Beschriftungsfeld Hintergrund: URL (check_radio_sheet.png)
Da ich ein Sprite-Sheet verwendet habe, muss ich nur die Hintergrundposition ändern. Beachten Sie auch, dass alles, was ich für das Anpassen der Markierungsspanne des Labels tun musste, wenn Sie ein Kontrollkästchen / Optionsfeld aktivieren, die Verwendung von CSS3 : geprüft Pseudo-Selektor.
Pseudo-Selektoren bieten eine großartige Unterstützung für alle Browser, es gelten jedoch die üblichen Einschränkungen, und der Fallback ist ziemlich elegant:
Kann ich Daten für allgemeine Pseudo-Selektoren verwenden?
Fallback: IE9 unter Windows 7 Frühe mobile Browser sind ebenfalls ein Problem - Unterstützung von : geprüft ist unklar. Mobile Safari vor iOS 6 tut nicht unterstützen Sie es zum Beispiel.
Okay, also sind wir fertig, richtig? Nun, lasst uns einfach noch einmal überprüfen. Zuerst das HTML:
Sieht das gleiche aus? Vergiss nicht, das hinzuzufügen ! Wenn Sie selbst damit experimentieren, empfehle ich Ihnen dringend, neue oder andere Wege zu finden, um diesen Teil auszuführen. Ich würde gerne sehen, was Sie dazu bringen, um es effizienter zu machen. Nun zum CSS:
Eingabe [Typ = "Ankreuzfeld"] Anzeige: keine; Eingabe [Typ = "Ankreuzfeld"] + Label Span Anzeige: Inline-Block; Breite: 19px; Höhe: 19px; Marge: -2px 10px 0 0; vertikal ausrichten: Mitte; Hintergrund: URL (check_radio_sheet.png) links oben keine Wiederholung; Cursor: Zeiger; Eingabe [Typ = "Ankreuzfeld"]: markiert + Beschriftungsfeld Hintergrund: URL (check_radio_sheet.png)
Alles vorhanden? Perfekt. Bedenken Sie, dass ein Großteil dieses Stylings von dem Stil abhängt, den ich für die Demo-Dateien erstellt habe. Ich ermutige Sie, Ihre eigenen zu erstellen und mit Platzierung und Präsentation zu experimentieren.
Zusammenfassend ist das Wichtigste, was Sie mitnehmen können, die allererste CSS-Zeile, die ich ganz oben geschrieben habe:
Eingabe [Typ = "Ankreuzfeld"]: geprüft + Beschriftung
Auf diese Weise können Sie eine ganze Art von verschiedenen Dingen erstellen. Die Möglichkeiten mit : geprüft Gehen Sie über Kontrollkästchen und Funkgeräte hinaus, um sie in Formularen zu verwenden, aber ich überlasse es Ihnen, damit alleine zu experimentieren. Einige Dinge zum Experimentieren mit:
Ich hoffe, Ihnen hat dieser kurze Artikel gefallen, und ich hoffe, Sie nehmen das, was Sie hier sehen und erweitern oder verbessern!
Zum Abschluss haben wir eine umfassende Anleitung zusammengestellt, die Sie beim Erlernen von CSS unterstützt, egal ob Sie gerade mit den Grundlagen beginnen oder etwas fortgeschritteneres CSS ausprobieren möchten.
