CSS :default Pseudo-classe
Utilisez la pseudo-classe CSS :default pour sélectionner et styliser les éléments par défaut. Exemples pratiques inclus.
La pseudo-classe :default correspond à l'élément par défaut dans un groupe de contrôles de formulaire associés — celui que le navigateur soumettrait (ou présélectionnerait) si l'utilisateur ne change rien. Un exemple typique est le bouton radio qui démarre sélectionné grâce à l'attribut checked.
La distinction clé est entre l'état par défaut et l'état actuel :
:defaultcorrespond à l'élément qui était le défaut au chargement de la page, et il continue à correspondre à cet élément même après que l'utilisateur en choisit un autre.:checkedcorrespond à ce qui est actuellement sélectionné, il suit donc les interactions de l'utilisateur.
Dans un groupe de boutons radio avec un bouton checked, :default cible toujours ce bouton d'origine, tandis que :checked suit le choix de l'utilisateur. Cela rend :default utile pour indiquer « c'est l'option recommandée/originale » sans changer le style à chaque clic de l'utilisateur.
Où il s'applique
:default ne correspond qu'à ces éléments :
<button>— le bouton de soumission par défaut d'un formulaire (le premier bouton de soumission).<input>avectype="checkbox"outype="radio"— une case à cocher ou un bouton radiocheckedpar défaut.<input>avectype="submit"outype="image"— le contrôle de soumission par défaut du formulaire.<option>— une option portant l'attributselected.
Il n'a aucun effet sur les champs de texte, <select> lui-même, ou tout élément non-formulaire.
Version
Syntaxe
:default {
/* CSS declarations */
}On le combine presque toujours avec un sélecteur d'élément ou d'attribut afin que la règle ne s'applique qu'au contrôle visé, par exemple input:default ou input[type="submit"]:default.
Exemple avec un bouton radio sélectionné par défaut
Le bouton radio marqué checked conserve le halo bleu même après avoir sélectionné Non, car :default mémorise le défaut au chargement.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:default {
box-shadow: 0 0 2px 2px #1c87c9;
}
.example {
margin: 20px auto;
font-size: 20px;
}
</style>
</head>
<body>
<h2>:default selector example</h2>
<div class="example">
<p>Do you like coffee?</p>
<input type="radio" name="radios" id="ex1" checked />
<label for="ex1">Yes</label>
<br />
<input type="radio" name="radios" id="ex2" />
<label for="ex2">No</label>
</div>
</body>
</html>Exemple avec le bouton de soumission par défaut
Le premier bouton de soumission d'un formulaire est son contrôle par défaut — appuyer sur Entrée dans un champ l'active. Ici, :default met en évidence ce premier bouton afin que les utilisateurs voient quelle action s'exécute par défaut.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 700px;
}
input[type=submit] {
padding: .6em 1em;
font-size: 1em;
width: 100px;
margin-bottom: 1em;
}
input[type=submit]:default {
border: 4px dotted #8ebf42;
}
</style>
</head>
<body>
<h2>:default selector example</h2>
<div class="example">
<form action="#">
<input type="submit" value="Yes" />
<input type="submit" value="No" />
</form>
</div>
</body>
</html>Exemple avec une option sélectionnée par défaut
Pour un menu <select>, :default cible l'<option> qui possède l'attribut selected — la valeur affichée avant que l'utilisateur ouvre le menu déroulant.
option:default {
font-weight: bold;
color: #1c87c9;
}<label for="size">Size:</label>
<select id="size">
<option>Small</option>
<option selected>Medium</option>
<option>Large</option>
</select>Ici Medium est stylisé car il porte l'attribut selected, même après que l'utilisateur choisit une taille différente.
Notes et pièges
- Un seul défaut par groupe. Un groupe de boutons radio ne devrait avoir qu'un seul défaut ; si vous marquez plusieurs boutons
checked, seul le dernier est le défaut dans le DOM. :defaultest statique,:checkedest dynamique. Utilisez:defaultpour signaler le choix d'origine ou recommandé, et:checkedpour réagir à la sélection actuelle de l'utilisateur.- Boutons de soumission. Seul le premier contrôle de type soumission d'un formulaire est le défaut, donc
:defaultcorrespond à un seul bouton même lorsque plusieurs existent. - Combinez-le avec des pseudo-classes d'état comme
:disabled,:enabled,:requiredet:optionalpour créer des formulaires clairs et entièrement stylisés.
Compatibilité des navigateurs
:default est pris en charge par tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge.