DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Pseudo-Klasse :checked in CSS wählt Elemente aus, wenn sie sich im ausgewählten Zustand befinden. Sie ist nur mit <input>-Elementen vom Typ Radio und Checkbox verbunden.Die Pseudo-Klassen-Selektor :checked passt auf Radio- und Checkbox-Eingabetypen, wenn sie angeklickt oder in einen Aktivierungszustand geschaltet sind. Wenn sie nicht ausgewählt oder angeklickt sind, gibt es keine Übereinstimmung.
Wenn also eine Checkbox angeklickt wird und Sie das direkt danach folgende Label ansprechen
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
} wird der Label-Text von grau kursiv zu rot normale Schrift geändert.
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
Das obige Beispiel zeigt die Verwendung der Pseudo-Klasse :checked zur Verbesserung der Barrierefreiheit von Formularen. Die Pseudo-Klasse :checked kann mit versteckten Eingaben und deren sichtbaren Labels verwendet werden, um interaktive Widgets wie Bildergalerien zu erstellen.
Weitere Ressourcen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | 3.1+ | Alle | 9+ | 9+ | any | any |
Nicht nur um das angeklickte Element zu finden, sondern auch um es zu gestalten
#Demo:checked { color:red; text-decoration:underline; } oder
input[type=”radio”]:checked{ color:red; … }
CSS ist großartig
Wenn ich die Reihenfolge ändere, wie schreibe ich den CSS-Code?
Ich habe so etwas wiederholt, bin aber verwirrt, wie ich es einfacher machen kann, wie Sie es getan haben
Das obige Beispiel zeigt die Verwendung der :checked-Pseudo-Klasse zur Verbesserung der Barrierefreiheit von Formularen.
Ich benutze diese Technik, um Navigationsmenüs in einem responsiven Layout auszublenden/anzuzeigen. Allerdings stelle ich fest, dass die LABEL-Tag nicht den Fokus erhalten kann, was diese Technik überhaupt nicht barrierefrei macht (zumindest nicht für Tastaturnutzer). Gibt es dafür eine Lösung?
Außerdem funktioniert meiner Erfahrung nach der Selektor für direkt nachfolgende Geschwisterelemente ('+') nicht unter iOS (man muss den allgemeinen Geschwisterselektor '~' verwenden).
iOS 8 scheint empfindlich auf dies zu reagieren. Mein Problem wurde behoben, indem ich von + zu ~ geändert habe! Danke!
Es könnte erwähnenswert sein, dass nicht ausgewählte Checkboxen spezifisch mit
:not(:checked)angesprochen werden können.Die Browserunterstützung ist fast gleich. Siehe https://css-tricks.de/almanac/selectors/n/not/
Hallo Dennis, vielen Dank für Ihren Kommentar.
Hallo,
Gibt es Ideen/Tricks, wie man es in IE8 verwenden kann, solange :checked nicht existiert?
Danke
Für IE8 füge ich die Klasse 'checked' hinzu und verwende
input[type=checkbox].checked + label {
color: #f00;
font-style: normal;
}
Es gibt verschiedene Arten von Eingabefeldern auf einer HTML-Seite, z. B. Text, Zahl, E-Mail, Radio, Checkbox. Wie kann ich nun alle Eingaben stylen
außer Radio und Checkbox? Ist dieser Code richtig, wenn ich das so mache?
input:not([typy=”radio & checkbox”]){
float:right;
}
Leider macht das Platzieren des Labels nach dem relevanten Feld, dass das Feld/Label-Paar gemäß WCAG 2.0 nicht barrierefrei ist. Es gibt viele Beispiele für dieses Feld + Label-Muster, aber damit die Markup für alle Benutzer und assistiven Technologien sinnvoll ist, sollte das Label zuerst kommen.
Ich warte auf den Tag, an dem wir Selektoren verwenden können, die das vorhergehende Element ansprechen
Leider macht das Platzieren des Labels nach dem relevanten Feld, dass das Feld/Label-Paar gemäß WCAG 2.0 nicht barrierefrei ist. Es gibt viele Beispiele für dieses Feld + Label-Muster, aber damit die Markup für alle Benutzer und assistiven Technologien sinnvoll ist, sollte das Label zuerst kommen.
Ich warte auf den Tag, an dem wir Selektoren verwenden können, die das vorhergehende Element ansprechen
Entschuldigung, die obige Aussage ist nicht ganz korrekt, es waren die Surfright-Standards, die dies vorschrieben. Labels nach Radiobuttons und Checkboxen sind gültig. Die WCAG 2.0 Richtlinien besagen, dass Radiobuttons und Checkboxen das Label danach positioniert haben können und (soweit ich weiß) dies nur eine Frage der visuellen Positionierung ist.
Danke Mann!
Browserunterstützung: Android: irgendwelche?
Nein, leider nicht. Sie haben es benannt. Android 4.2 ist immer noch betroffen. Ihr vorgeschlagener Hack hat auf einigen Geräten ernsthafte Leistungsprobleme.
Ich habe keine andere Lösung.
Gibt es eine Lösung, wenn wir den "id" zusammen mit "Checkbox" mehrmals wiederholen wollen????? Ich brauche mehr Checkboxes und Labels in meinem Projekt..
:(
(Entschuldigen Sie mein schlechtes Englisch)
Hallo
Kann mir das jemand sagen
ich habe zwei Radiobuttons.
Wenn ich einen Radiobutton ankreuze, möchte ich, dass der andere Radiobutton ebenfalls angeklickt wird. Das heißt, der andere Radiobutton wird angeklickt, wenn ein anderer Radiobutton angeklickt wird.
hi
Eine weitere Sache ist, dass dies mit HTML und CSS erfolgen soll. Ohne die Verwendung von JavaScript.
Hallo Jugal. Das können Sie nicht mit Radio-Inputs tun. Es kann immer nur ein Radio-Input gleichzeitig ausgewählt werden. Stattdessen möchten Sie verwenden
input="checkbox"Sie benötigen jedoch JavaScript, um andere Eingaben zu umschalten, wenn eine ausgewählt ist. Das allein mit HTML und CSS ist nicht möglich.
Alle CSS3 Pseudo-Klassen sind ziemlich cool. Sie erleichtern das Leben eines Webdesigners enorm und konzentrieren sich auf semantischere, sauberere und einfachere Codes. Ganz zu schweigen davon, dass CSS4 uns bereits noch mehr köstliche Wunder beschert hat.
Seien Sie gewarnt, dass dieser Code in Safari 5.0.1 NICHT wie erwartet funktioniert, wenn Sie ihn auf ein UL-Element anwenden.
Hat jemand versucht, dies mit :focus zu tun?
@Tim
Ich habe gestern etwas mit dem :focus-Selektor fertiggestellt. Ich habe mein Label so gestaltet, als wäre es ein '
<div>' innerhalb eines tatsächlichen<div>. Der :focus-Selektor führt eine Überprüfung der Checkbox durch, nicht des Labels selbst, daher können Sie display:none nicht darauf anwenden. Um das zu umgehen, habe ich es einfach nach oben und 9999px von der Seite weg verschoben. Außerdem benötige ich für jedes meiner Labels eine Checkbox ('<div>'s), daher muss ich für jede einzelne CSS-Anweisungen individuell haben, weshalb ich meine ID-Tags nummeriert habe. Das funktioniert für mich, weil ich eine bekannte Anzahl von Boxen auf meiner Seite habe.Wenn jemand eine einfachere (oder effizientere) Methode zur Verwendung von Selektoren kennt, kann er mich gerne korrigieren. Ich habe erst vor etwa einer Woche angefangen, mit CSS herumzuspielen.
Ich verwende Firefox 38.0.5 für all dies auf einem Windows 7.
CSS
HTML
Ich habe ein Off-Canvas-Menü auf meiner Website implementiert, aber der Sitewrap schiebt sich unter iOS 4 und 5 nicht heraus, um das Menü anzuzeigen. Auf allen anderen Geräten und Browsern funktioniert es einwandfrei. Wenn der Nav-Trigger gedrückt wird, passiert nichts, daher gehe ich davon aus, dass es etwas mit dem Pseudo-Element ':checked' zu tun hat.
Ich wäre dankbar für jede Hilfe, die Sie mir geben können, es treibt mich in den Wahnsinn Lol!
Hier ist ein Link zu meinem Code auf Codepen
http://codepen.io/anon/pen/rOdQOQ
Vielen Dank im Voraus
Marc
Mir war nicht bewusst, dass anonyme Pens auf Codepen nicht eingereicht werden können... Hoffentlich funktioniert dieser.
Danke.
Marc
Es scheint, dass es für Chrome auf iOS 9 wieder kaputt ist. Siehe dieses Problem https://code.google.com/p/chromium/issues/detail?id=534210
das funktioniert ohne JS
http://codepen.io/anon/pen/NxdVRX
Wie kann ich schreibgeschützte Radiobuttons mit CSS auswählen?
Wie kann ich mit CSS Radiobuttons auswählen, die sowohl schreibgeschützt als auch angeklickt sind?
Aber
readonlywird bei Radiobuttons ignoriert, daher ist es unsinnig.Wie deaktiviere ich einen Radiobutton nach der Auswahl
https://jsfiddle.net/ajshres/skmw6hjd/
Wie sehr macht es einen Unterschied, wenn ich ein Label als Elternteil und einen Span oder Div als Geschwisterelement verwende und kein for und id.
Für eine Liste von Checkboxen müssten IDs eindeutig generiert werden, und wenn wir keine IDs verwenden müssten, wäre das viel übersichtlicher.
vgjdfighbn
Die folgenden Zeilen sind ein perfekt funktionierendes Beispiel für ein Untermenü. Kürzester Code?
Rate mal
Funktionierendes Untermenü
input[type=checkbox] + div {display:none} input[type=checkbox]:checked + div {display:inline-block}
Die folgenden Zeilen sind ein perfekt funktionierendes Beispiel für ein Untermenü. Kürzester Code?
Entschuldigung für den vorherigen Kommentar, diesen möchte ich teilen.
Erstes Mal, dass ich hier schreibe, wusste nicht, wie man Code teilt, aber jetzt weiß ich es.
Die folgenden Zeilen sind ein perfekt funktionierendes Beispiel für ein Untermenü. Kürzester Code?
Entschuldigung für den vorherigen Kommentar, diesen möchte ich teilen.
Checkbox zum Ein-/Ausschalten des Untermenüs über dem Hintergrund. iPhone-sicher?
Ich lese, dass der :checked Pseudo-Selektor auch mit Select-Optionen funktioniert und die vom Benutzer ausgewählte Option beeinflusst, nicht nur Checkboxen und Radiobuttons. Das war neu für mich, macht aber Sinn.
Auch interessant: Es gibt einen dritten Zustand für Checkboxen, Radiobutton-Gruppen und Balken. Das ist :indeterminate und kann mit JavaScript gesetzt werden.
Hallo, kann mir jemand helfen? Ich übe mich in einer To-Do-Listen-Website und habe das folgende Attribut zu meiner CSS-Datei hinzugefügt. Es erlaubt mir nicht, eine Checkbox zu deaktivieren, nachdem sie angeklickt wurde. Was soll ich tun?
Wenn ich dieses Attribut entferne, kann jede Checkbox angeklickt oder deaktiviert werden.
Ich arbeite mit Google Chrome Version 64.0.3282.140 (Offizieller Build) (64-Bit).
Hm, das ist seltsam. CSS sollte den Zustand der Checkbox nicht ändern, sondern sie nur basierend auf ihrem Zustand gestalten – in diesem Fall, wenn sie angeklickt ist. Haben Sie versucht, jede Eigenschaft einzeln zu entfernen, um zu sehen, ob eine davon der Schuldige ist? Das könnte helfen, das Problem zu isolieren, falls es am CSS liegt.
Ich habe aufgeräumt und jetzt funktioniert es einwandfrei! Ich erinnere mich nicht mehr an den vorherigen Zustand, um sie zu vergleichen und daraus zu lernen :-\ Danke für Ihre Hilfe.
Ich versuche das, aber es scheint, dass ich ein Element nicht ansprechen kann, das sich außerhalb des Formularelements befindet, in dem sich die Checkbox befindet. Ist das nicht möglich?
Hallo! Haben Sie zufällig einen Link zu einem Codepen (oder einer anderen Demo mit dem Code)?
Wie kann ich für verschiedene Checkbox-Labels auf derselben Seite unterschiedliche Stile erhalten?
Ich habe mehrere Ideen ausprobiert und nichts funktioniert für mich.
Ich erhalte immer denselben Stil für alle meine Labels bei verschiedenen Checkboxen.
Vielen Dank im Voraus.
Sie können eine Elternklasse verwenden.