:default
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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 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 |
Compatibilité des navigateurs
Loading…