web-dev-qa-db-fra.com

CSS3: pseudo-classe non cochée

Je sais qu'il existe une pseudo-classe CSS3 :checked officielle, mais existe-t-il une pseudo-classe :unchecked et ont-elles la même prise en charge de navigateur?

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

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

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

Modifier:

Le w3c recommande la même technique

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

:not(:checked)
csscss3css-selectorspseudo-class
81
Web_Designer

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

En fait, la citation du W3C est extraite de la spécification de Selectors 4 . Étant donné que (Sélecteurs 4} _ recommande d'utiliser :not(:checked), il est prudent de supposer qu'il n'y a pas de pseudo :unchecked correspondant. La prise en charge du navigateur pour :not() et :checked est identique, donc cela ne devrait pas poser de problème.

Cela peut sembler incohérent avec les états :enabled et :disabled, d’autant plus qu’un élément peut être activé ou désactivé ni (c’est-à-dire que la sémantique ne s’applique pas complètement), mais il ne semble pas y avoir d’explication pour cette incohérence.

(:indeterminate ne compte pas, car un élément ne peut pas non plus être désélectionné, vérifié ni indéterminé, car la sémantique ne s'applique pas.)

76
BoltClock

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 ancien fil de discussion, mais j'ai eu l'impression qu'il aurait pu utiliser une meilleure réponse.

EDIT (03/03/2016):

Les spécifications W3C indiquent que :not(:checked) est un exemple de sélection de l’état non vérifié. Cependant, il s'agit explicitement de l'état non vérifié et appliquera ces styles uniquement à l'état non vérifié. Ceci est utile pour ajouter un style qui n'est nécessaire que sur l'état non contrôlé et qui aurait besoin d'être retiré de l'état activé s'il était utilisé sur le sélecteur input[type="checkbox"]. Voir l'exemple ci-dessous pour plus de précisions.

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 sélecteur :checked aurait dû utiliser un border: none; pour obtenir le même effet.

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

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

23
Michael Stramel

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

Vous allez obtenir une meilleure prise en charge du navigateur avec jQuery ... vous pouvez utiliser une fonction de clic pour détecter le moment où le clic se produit et si sa case est cochée ou non, vous pouvez alors ajouter une classe ou supprimer une classe si nécessaire ...

4
Jeff Wooden

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

0
Daniel Ram