English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:disabled est un pseudo-classe CSS qui représente tout élément désactivé. Si un élément ne peut pas être activé (tel que sélectionné, cliqué ou accepter l'entrée de texte) ou obtenir le focus, cet élément est dans un état désactivé. L'élément a également un état activé (enabled state), où l'élément peut être activé ou obtenir le focus.
Guide complet des sélecteurs CSS
Définir la couleur de fond de tous les éléments d'entrée de type="text" désactivés :
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(w3(codebox.com)</title>
<style>
input[type="text"]:enabled
{
background:yellow;
}
input[type="text"]:disabled
{
background:#dddddd;
}
</style>
</head>
<body>
<form action="">
Nom: <input type="text" value="Mouse" /><br>
Région: <input type="text" disabled="disabled" value="Disneyland" /><br>
</form>
</body>
</html>Testez et voyez ‹/›:disabled Sélecteur correspond à chaque élément désactivé (utilisé principalement pour les éléments de formulaire).
Les nombres dans le tableau indiquent la version du premier navigateur pris en charge pour cette propriété.
| Sélecteur | |||||
|---|---|---|---|---|---|
| :disabled | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Définir la couleur de fond pour tous les éléments d'entrée désactivés :
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(w3(codebox.com)</title>
<style>
input:enabled
{
background:yellow;
}
input:disabled
{
background:#dddddd;
}
</style>
</head>
<body>
<form action="">
Prénom: <input type="text" value="Mickey" /><br>
Nom: <input type="text" value="Mouse" /><br>
Pays: <input type="text" disabled="disabled" value="Disneyland" /><br>
Mot de passe: <input type="password" name="password" />
<input type="radio" value="masculin" name="gender" /> Masculin<br>
<input type="radio" value="femelle" name="gender" /> Féminin<br>
<input type="checkbox" value="Bicyclette" /> J'ai une bicyclette<br>
<input type="checkbox" value="Voiture" /> J'ai une voiture
</form>
</body>
</html>Testez et voyez ‹/›