:disabled
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 juillet 2015.
La pseudo-classe CSS :disabled permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus.
Exemple interactif
label {
display: block;
margin-top: 1em;
}
*:disabled {
background-color: dimgrey;
color: linen;
opacity: 1;
}
<form>
<label for="name">Nom :</label>
<input id="name" name="name" type="text" />
<label for="emp">Employé :</label>
<select id="emp" name="emp" disabled>
<option>Non</option>
<option>Oui</option>
</select>
<label for="empDate">Date d'embauche :</label>
<input id="empDate" name="empDate" type="date" disabled />
<label for="resume">CV :</label>
<input id="resume" name="resume" type="file" />
</form>
Syntaxe
:disabled {
/* ... */
}
Exemples
Cet exemple montre un formulaire d'expédition basique. Il utilise l'événement JavaScript change pour permettre à l'utilisateur·ice d'activer/désactiver les champs de facturation.
HTML
<form action="#">
<fieldset>
<legend>Adresse de livraison</legend>
<input type="text" placeholder="Nom" />
<input type="text" placeholder="Adresse" />
<input type="text" placeholder="Code postal" />
</fieldset>
<br />
<fieldset id="facturation">
<legend>Adresse de facturation</legend>
<label for="facturation-livraison"
>Identique à l'adresse de livraison</label
>
<input type="checkbox" id="facturation-livraison" checked />
<br />
<input type="text" placeholder="Nom" disabled />
<input type="text" placeholder="Adresse" disabled />
<input type="text" placeholder="Code postal" disabled />
</fieldset>
</form>
CSS
input[type="text"]:disabled {
background: #cccccc;
}
JavaScript
const checkbox = document.querySelector("#facturation-livraison");
const billingItems = document.querySelectorAll(
'#facturation input[type="text"]',
);
checkbox.addEventListener("change", () => {
billingItems.forEach((item) => {
item.disabled = !item.disabled;
});
});
Résultat
Cochez/décochez la case pour modifier le style des champs de facturation.
Spécifications
| Specification |
|---|
| HTML # selector-disabled |
| Selectors Level 4 # disabled-pseudo |
Compatibilité des navigateurs
Chargement…