La pseudo-classe :default représente un élément de l'interface utilisateur qui est l'élément par défaut parmi d'autres éléments semblables (par exemple le bouton par défaut d'un groupe de boutons).

/* Cible l'élément par défaut d'un groupe */
:default {
  background-color: lime;
}

Ainsi, le bouton actionné par défaut parmi plusieurs boutons pourra être mis en forme en le ciblant avec cette pseudo-classe.

Ce sélecteur peut être utilisé sur des éléments <button>, <input type="checkbox">, <input type="radio"> et <option> :

  • Un élément <option> par défaut est le premier qui possède l'attribut selected ou le premier qui est activé selon l'ordre du DOM.
  • Les éléments <input type="checkbox"> et <input type="radio"> seront ciblés s'ils possèdent l'attribut checked.
  • L'élément <button> est ciblé si c'est le bouton d'envoi par défaut d'un formulaire, c'est-à-dire le premier bouton (selon l'ordre du DOM) appartenant au formulaire (cela vaut également pour les éléments <input> dont le type permet d'envoyer des formulaires tels que image ou submit).

Note : La spécification WHATWG HTML définit cela dans le paragraphe 4.16.3.

Les éléments de l'interface utilisateur qui permette une sélection multiple peuvent avoir plusieurs éléments par défaut. Dans ce cas, tous les éléments par défaut sont ciblés via la pseudo-classe :default.

Syntaxe

:default

Exemples

CSS

input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

HTML

<fieldset>
  <legend>Saison préférée</legend>

  <input type="radio" name="season" id="spring">
  <label for="spring">Printemps</label>

  <input type="radio" name="season" id="summer" checked>
  <label for="summer">Eté</label>

  <input type="radio" name="season" id="fall">
  <label for="fall">Automne</label>

  <input type="radio" name="season" id="winter">
  <label for="winter">Hiver</label>
</fieldset>

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':default' dans cette spécification.
Standard évolutif Aucune modification.
HTML5
La définition de ':default' dans cette spécification.
Recommendation La sémantique liée au HTML est définie et les contraintes de validation sont également définies.
Selectors Level 4
La définition de ':default' dans cette spécification.
Version de travail Aucune modification.
CSS Basic User Interface Module Level 3
La définition de ':default' dans cette spécification.
Recommendation Définition initiale de la pseudo-classe mais pas de la sémantique associée.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:defaultChrome Support complet 10Edge ? Firefox Support complet 4IE Aucun support NonOpera Support complet 10Safari Support complet 5WebView Android Support complet 37Chrome Android Support complet 18Edge Mobile ? Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 5Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, teoli, tregagnon, FredB, Mgjbot, BenoitL
Dernière mise à jour par : SphinxKnight,