CSS3: pseudo-classe non cochée

108

Je sais qu'il existe une :checkedpseudo-classe CSS3 officielle , mais y a-t-il une :uncheckedpseudo-classe et ont-ils le même support de navigateur?

La référence de Sitepoint n'en mentionne pas un, mais cette spécification whatwg (quoi que ce soit) le fait.

Je sais que peut obtenir le même résultat lorsque les :checkedet :not()pseudo-classes sont combinées, mais je suis toujours curieux:

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

Éditer:

Le w3c recommande la même technique

Une case à cocher non cochée peut être cochée en utilisant la pseudo-classe de négation:

:not(:checked)
Web_Designer
la source

Réponses:

104

:unchecked n'est pas défini dans les spécifications de niveau 3 des sélecteurs ou de l'interface utilisateur CSS, ni dans le niveau 4 des sélecteurs.

En fait, la citation du W3C est tirée de la spécification Selectors 4 . Puisque Selectors 4 recommande l'utilisation :not(:checked), il est prudent de supposer qu'il n'y a pas de :uncheckedpseudo correspondant . Le support du navigateur pour :not()et :checkedest identique, donc cela ne devrait pas être un problème.

Cela peut sembler incohérent avec les états :enabledet :disabled, d'autant plus qu'un élément ne peut être ni activé ni désactivé (c'est-à-dire que la sémantique ne s'applique pas du tout), cependant il ne semble pas y avoir d'explication à cette incohérence.

( :indeterminatene compte pas, car un élément ne peut être ni décoché, ni coché, ni indéterminé, car la sémantique ne s'applique pas.)

BoltClock
la source
Juste pour ajouter à cette réponse que la sélection: non (: cochée) fonctionne parfaitement sur Chrome, mais ce n'est pas le cas sur IE (testé sur 9 et 11).
Bruno Finger
@Bruno Finger:: coché et: non (: coché) devraient tous deux fonctionner sur IE, sauf que les deux sont également affectés par un bogue où la modification du statut coché ne met pas à jour les styles des éléments ciblés par rapport au coché / décoché élément.
BoltClock
35

Je pense que vous essayez de trop compliquer les choses. Une solution simple consiste simplement à styliser votre case à cocher par défaut avec les styles non cochés, puis à ajouter les styles d'état cochés.

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

Je m'excuse d'avoir évoqué un vieux fil de discussion, mais j'avais l'impression qu'il aurait pu utiliser une meilleure réponse.

MODIFIER (03/03/2016):

Les spécifications W3C indiquent cela :not(:checked)comme exemple de sélection de l'état non coché. Cependant, il s'agit explicitement de l'état non vérifié et n'appliquera ces styles qu'à l'état non vérifié. Ceci est utile pour ajouter un style qui n'est nécessaire que sur l'état non coché et qui devrait être supprimé de l'état coché s'il est utilisé sur le input[type="checkbox"]sélecteur. Voir l'exemple ci-dessous pour clarification.

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
}

Sans utiliser :not(:checked)dans l'exemple ci-dessus, le :checkedsélecteur aurait dû utiliser a border: none;pour obtenir le même effet.

Utilisez le input[type="checkbox"]pour le style de base pour réduire la duplication.

Utilisez input[type="checkbox"]:not(:checked)pour les styles non cochés explicites que vous ne souhaitez pas appliquer à l'état coché.

Michael Stramel
la source
Il existe d'autres utilisations des sélecteurs css là où c'est utile / expressif: javascript, test automatisé du navigateur
nruth
2
Ce n'est pas toujours possible. Les éléments de formulaire en particulier sont connus pour ne pas vous permettre de les restaurer à leur apparence par défaut via des règles en cascade. (Mais pourquoi quelqu'un voudrait donner uniquement aux entrées cochées ou non cochées un aspect personnalisé tout en laissant l'autre menthe me dépasse.)
BoltClock
Un autre cas où cela n'est pas possible: plus de 2 boutons radio. Par exemple, vous pouvez souhaiter un style lorsque l'option n ° 1 est: cochée et un autre lorsque tout le reste est: coché. La solution est:not(:checked)
Navin
Si vous manquèrent ceux de particuliers ne veulent style, pourquoi ne pas utiliser un :first-child, :last-childou :nth-childsélecteur en combinaison avec :checked. :not(:checked)ne couvrira pas la situation que vous avez spécifiée à moins que je ne comprenne mal votre commentaire.
Michael Stramel du
@MichaelStramel mettant l'ordre des html dans le css? nope thanks
inetphantom
3

Il n'y a pas de pseudo-classe: non cochée mais si vous utilisez la pseudo-classe: checked et le sélecteur frère, vous pouvez différencier les deux états. Je crois que tous les derniers navigateurs prennent en charge la pseudo-classe: checked, vous pouvez trouver plus d'informations sur cette ressource: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Vous allez obtenir un meilleur support du navigateur avec jquery ... vous pouvez utiliser une fonction de clic pour détecter quand le clic se produit et s'il est coché ou non, alors vous pouvez ajouter une classe ou supprimer une classe si nécessaire ...

Jeff Wooden
la source
-2

La façon dont j'ai géré cela consistait à changer le nom de classe d'une étiquette en fonction d'une condition. De cette façon, vous n'avez besoin que d'une seule étiquette et vous pouvez avoir différentes classes pour différents états ... J'espère que cela vous aidera!

Daniel Ram
la source