: par défaut - Astuces CSS

Anonim

Le :defaultpseudo-sélecteur correspondra à la valeur par défaut dans un groupe d'éléments associés, tels que le bouton radio dans un groupe de boutons sélectionné par défaut, même si l'utilisateur a sélectionné une valeur différente.

input(type="radio"):default + label:after ( content: ' (default)'; color: #999; font-style: italic; )

Le CSS ci-dessus cible l'étiquette venant immédiatement après le bouton radio sélectionné par défaut dans un groupe de boutons radio:

  • rouge
  • vert
  • bleu

Le libellé du bouton radio vert sera suivi du texte «(par défaut)» en texte gris et italique dans les navigateurs pris en charge.

  • rouge
  • vert
  • bleu

Les exemples incluent le bouton d'envoi par défaut dans un groupe de boutons, l'option par défaut d'un menu contextuel, le bouton radio dont l' checkedattribut est défini dans le HTML (comme indiqué dans les navigateurs pris en charge) et les cases à cocher cochées par défaut.

Plus de ressources

  • Démo
  • Page MDN activée: par défaut
  • Spécifications de l'interface utilisateur W3C CSS3
  • Sélecteurs W3C Niveau 4

Prise en charge du navigateur

Différents navigateurs ont différents niveaux de support. Firefox fournit un support complet. Les navigateurs Webkit prennent en charge la valeur par défaut sur les boutons mais pas sur la radio ou les cases à cocher, et Opera est l'inverse, le prenant en charge sur les boutons radio et les cases à cocher, mais pas lors de l'envoi.

  • Opera prend :defaulten charge les cases à cocher et les boutons radio.
  • Les navigateurs Webkit, y compris Chrome et Safari, prennent :defaulten charge le bouton d'envoi
  • Firefox prend :defaulten charge les types d'entrée à case à cocher, radio ET soumission.
  • Internet Explorer ne prend pas en charge :defaultles types de case à cocher, de radio ou d'envoi.
Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
dix 5 4 dix rien rien 5