:optional
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La pseudo-classe :optional
permet de cibler les éléments ou
pour lesquels l'attribut
required
n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire.
/* Cible les élméents qui sont optionnels */
/* c'est-à-dire qui n'ont pas d'attribut required */
input:optional {
border: 1px dashed black;
}
Note :
Afin de mettre en forme les champs obligatoires, on pourra utiliser la pseudo-classe :required
.
Syntaxe
Exemples
CSS
input {
border-width: 3px;
}
input:optional {
border-color: #008000;
}
input:required {
border-color: #800000;
}
HTML
Résultat
Accessibilité
Si un formulaire () contient des champs (
) optionnels, les champs obligatoires doivent être indiqués avec l'attribut
input
. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.
Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.
Spécifications
Specification |
---|
HTML # selector-optional |
Selectors Level 4 # optional-pseudo |