wake-up-neo.com

CSS3: ungeprüfte Pseudoklasse

Ich weiß, dass es eine offizielle CSS3 :checked-Pseudoklasse gibt, aber gibt es eine :unchecked-Pseudoklasse, und haben sie dieselbe Browserunterstützung?

Sitepoint's Referenz erwähnt keine, jedoch diese whatwg spec (was auch immer das ist).

Ich weiß, dass das gleiche Ergebnis erzielt werden kann, wenn die Pseudoklassen :checked und :not() kombiniert werden, aber ich bin immer noch neugierig:

input[type="checkbox"]:not(:checked) {
    /* styles */
}

Bearbeiten:

Das w3c empfiehlt die gleiche Technik

Ein ungeprüftes Kontrollkästchen kann mithilfe der Negierungspseudoklasse ausgewählt werden:

:not(:checked)
81
Web_Designer

:unchecked ist in den Spezifikationen für Selectors oder CSS UI Level 3 nicht definiert und auch nicht in Level 4 von Selectors enthalten.

Tatsächlich ist das Zitat von W3C aus der Selectors 4-Spezifikation entnommen . Da Selectors 4 die Verwendung von :not(:checked) empfiehlt, kann davon ausgegangen werden, dass es keinen entsprechenden :unchecked-Pseudo gibt. Die Browserunterstützung für :not() und :checked ist identisch, daher sollte dies kein Problem sein.

Dies scheint inkonsistent mit den :enabled- und :disabled-Zuständen zu sein, insbesondere da ein Element weder aktiviert noch deaktiviert werden kann (d. H. Die Semantik ist nicht zutreffend), es scheint jedoch keine Erklärung für diese Inkonsistenz zu geben.

(:indeterminate zählt nicht, da ein Element auf ähnliche Weise weder ungeprüft noch geprüft oder unbestimmt sein kann, da die Semantik nicht gilt.)

76
BoltClock

Ich denke, Sie versuchen, die Dinge zu kompliziert zu machen. Eine einfache Lösung besteht darin, das Kontrollkästchen standardmäßig nur mit den ungeprüften Formaten zu gestalten und dann die markierten Statusstile hinzuzufügen.

input[type="checkbox"] {
  // Unchecked Styles
}
input[type="checkbox"]:checked {
  // Checked Styles
}

Ich entschuldige mich für das Aufwerfen eines alten Threads, hatte aber das Gefühl, dass er eine bessere Antwort hätte verwenden können.

EDIT (3/3/2016):

In den W3C-Spezifikationen wird :not(:checked) als Beispiel für die Auswahl des ungeprüften Status angegeben. Dies ist jedoch explizit der ungeprüfte Status und wendet diese Stile nur auf den ungeprüften Status an. Dies ist hilfreich, wenn Sie ein Styling hinzufügen möchten, das nur für den ungeprüften Status erforderlich ist und aus dem aktivierten Status entfernt werden müsste, wenn es im input[type="checkbox"]-Selektor verwendet wird. Siehe nachfolgendes Beispiel zur Verdeutlichung.

input[type="checkbox"] {
  /* Base Styles aka unchecked */
  font-weight: 300; // Will be overwritten by :checked
  font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
  /* Explicit Unchecked Styles */
  border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
  /* Checked Styles */
  font-weight: 900; // Use a bold font when checked
}

Ohne :not(:checked) im obigen Beispiel müsste der :checked-Selector einen border: none; verwenden, um denselben Effekt zu erzielen.

Verwenden Sie den input[type="checkbox"] für das Basisstyling, um Doppelarbeit zu vermeiden.

Verwenden Sie input[type="checkbox"]:not(:checked) für explizite ungeprüfte Stile, die Sie nicht auf den geprüften Status anwenden möchten.

23
Michael Stramel

Es gibt keine: ungeprüfte Pseudoklasse. Wenn Sie jedoch die:: - Pseudoklasse: und die gleichgeordnete Auswahl für Geschwister verwenden, können Sie beide Zustände unterscheiden. Ich glaube, alle neuesten Browser unterstützen die: checked Pseudo-Klasse. Weitere Informationen finden Sie in dieser Ressource: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Sie erhalten eine bessere Browserunterstützung mit jquery ... Sie können eine Klick-Funktion verwenden, um herauszufinden, wann ein Klick erfolgt und ob er markiert ist oder nicht, Sie können eine Klasse hinzufügen oder eine Klasse entfernen, falls erforderlich.

4
Jeff Wooden

Auf diese Weise habe ich den Klassennamen eines Labels basierend auf einer Bedingung geändert. Auf diese Weise benötigen Sie nur ein Etikett und können verschiedene Klassen für verschiedene Zustände haben ... Hoffe, das hilft!

0
Daniel Ram