:default
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La pseudo-classe CSS :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).
Exemple interactif
label,
input[type="submit"] {
display: block;
margin-top: 1em;
}
input:default {
border: none;
outline: 2px solid deeppink;
}
<form>
<p>Comment avez-vous entendu parler de nous ?</p>
<label
><input name="origin" type="radio" value="google" checked /> Google</label
>
<label><input name="origin" type="radio" value="facebook" /> Facebook</label>
<p>Veuillez accepter nos conditions :</p>
<label
><input name="newsletter" type="checkbox" checked /> Je souhaite m'abonner à
une newsletter personnalisée.</label
>
<label
><input name="privacy" type="checkbox" /> J'ai lu et j'accepte la Politique
de confidentialité.</label
>
<input type="submit" value="Soumettre le formulaire" />
</form>
Ce sélecteur est spécifié par WHATWG HTML dans le paragraphe 4.16.3 (angl.) et peut être utilisé par les é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'attributselectedou 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'attributchecked. - 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 queimageousubmit).
Syntaxe
css
:default {
/* ... */
}
Exemples
HTML
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>
CSS
css
input:default {
box-shadow: 0 0 2px 1px coral;
}
input:default + label {
color: coral;
}
Résultat
Spécifications
| Specification |
|---|
| HTML # selector-default |
| Selectors Level 4 # default-pseudo |