Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
: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.
Lapseudo-classeCSS: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 dansle 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" /> <label for="spring">Printemps</label> <input type="radio" name="season" checked /> <label for="summer">Eté</label> <input type="radio" name="season" /> <label for="fall">Automne</label> <input type="radio" name="season" /> <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 |