Pseudo-classe CSS :required
La pseudo-classe CSS :required sélectionne les éléments de formulaire qui ont l'attribut required défini. Cela permet aux formulaires d'indiquer quels champs doivent contenir des données valides avant la soumission, aidant ainsi les utilisateurs à éviter des attentes inutiles.
Elle s'applique aux éléments de formulaire qui prennent en charge l'attribut required, tels que <input>, <select> et <textarea>. Le sélecteur :required peut être associé à des pseudo-éléments (par ex. ::after) et à d'autres sélecteurs (par ex. :hover). Les éléments non requis peuvent être personnalisés avec la pseudo-classe :optional ainsi qu'avec :valid et :invalid, qui sont activés lorsque les exigences de données d'un champ de formulaire sont remplies.
Version
CSS Basic User Interface Module Level 3
Syntaxe
Syntaxe CSS :required
:required {
css declarations;
}Exemple du sélecteur :required :
Exemple de code CSS :required
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 400px;
}
label,
button {
display: block;
width: 100%;
margin-bottom: 1.5em;
}
input,
button {
padding: .4em 1em;
}
input {
border: 1px solid #666666;
}
input:optional {
background-color: #eeeeee;
color: #666666;
}
input:required {
border-bottom: 3px solid #1c87c9;
}
</style>
</head>
<body>
<h2>:required selector example</h2>
<div class="example">
<form action="#">
<label>
<input type="text" required />Name *
</label>
<label>
<input type="email" required />Email *
</label>
<label>
<input type="tel" />Phone (optional)
</label>
<label>
<input type="url" />Address (optional)
</label>
</form>
</div>
</body>
</html>Dans l'exemple ci-dessous, les sélecteurs de pseudo-classe :optional et :required sont tous deux utilisés.
Pratique
Quelle est la fonction de la pseudo-classe ':required' en CSS ?