Pseudo Classe CSS :disabled

La pseudo-classe :disabled sélectionne et style les éléments qui sont désactivés.

Ces éléments sont en général les éléments de forme, tels que boutons (<button>), menus de sélection (<select>), types d'entrée (<input>), et textareas (<textarea>).

Les éléments désactivés n'acceptent pas de cliques, entrée de texte, ou foyer.

Version

CSS3

Syntaxe

:disabled {
css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      input{
      padding:2px 5px;
      margin-bottom:10px;
      border:1px solid #ccc;
      }
      input[type=text]:enabled {
      background: #eee;
      }
      input[type=text]:disabled {
      background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :disabled</h2>
    <form action="">
      <label for="name">Prénom:</label> 
      <input type="text" value="John" id="name"><br>
      <label for="lastname">Nom:</label> 
      <input type="text" value="Smith" id="lastname"><br>
      <label for="country"l>Pays:</label> 
      <input type="text" disabled="disabled" value="10 High Street" id="conutry">
    </form>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec le sélecteur :disabled:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      option:disabled {
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :disabled</h2>
    <select>
      <option value="paris">Paris</option>
      <option value="london" disabled>London</option>
      <option value="moscow">Moscou</option>
      <option value="rome" disabled>Rome</option>
      <option value="berlin">Berlin</option>
    </select>
  </body>
</html>