CSS :pseudo-classe :disabled

La pseudo-classe :disabled sélectionne et met en forme les éléments désactivés.

Exemple de la pseudo-classe CSS :disabled

Ces éléments sont généralement des éléments de formulaire, tels que des boutons (<button>), des menus déroulants (<select>), des types d'entrée (<input>) et des zones de texte (<textarea>).

Les éléments désactivés n'acceptent pas les clics, la saisie de texte ni le focus.

Version

CSS Basic User Interface Module Level 3

Selectors Level 3

Syntaxe

Exemple de syntaxe CSS :disabled

css

:disabled {
  css declarations;
}

Exemple de définition d'une couleur d'arrière-plan pour un élément `<input>` désactivé :

Exemple de code CSS :disabled

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>:disabled selector example for input</h2>
    <form action="">
      <label for="name">First name:</label>
      <input type="text" value="John" id="name" />
      <br />
      <label for="lastname">Last name:</label>
      <input type="text" value="Smith" id="lastname" />
      <br />
      <label for="country">Country:</label>
      <input type="text" disabled="disabled" value="10 High Street" id="country" />
    </form>
  </body>
</html>

Try it Yourself »

Exemple de définition d'une couleur d'arrière-plan pour des éléments `<option>` désactivés :

Autre exemple de code CSS :disabled

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      option:disabled {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:disabled selector example for option</h2>
    <select>
      <option value="paris">Paris</option>
      <option value="london" disabled>London</option>
      <option value="moscow">Moscow</option>
      <option value="rome" disabled>Rome</option>
      <option value="berlin">Berlin</option>
    </select>
  </body>
</html>

Try it Yourself »

Remarque : La pseudo-classe :disabled a la priorité sur :valid et :invalid. Les éléments de formulaire désactivés ne sont pas validés par le navigateur.

Exemple d'un élément `<input>` désactivé :

Exemple d'élément d'entrée désactivé

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        width: 60%;
        margin: 0;
        border: none;
        outline: 1px solid lightgrey;
        outline-offset: 2px;
      }
      input:disabled {
        background: #cccccc;
        cursor: not-allowed;
      }
      form {
        background: #67a6ec;
        padding: 1.5em;
        max-width: 400px;
        width: 100%;
        outline: 10px solid rgba(17, 58, 103, 0.6);
      }
      hr {
        visibility: hidden;
      }
      label {
        margin-right: 3%;
        text-align: left;
        display: inline-block;
        width: 35%;
      }
    </style>
  </head>
  <body>
    <h2>:disabled selector example with styling</h2>
    <form action="#">
      <label for="name">Enabled Input:</label>
      <input type="text" autofocus />
      <hr />
      <label for="name">Disabled Input:</label>
      <input type="text" disabled />
    </form>
  </body>
</html>

Try it Yourself »

Pratique

Quelles sont les caractéristiques de l'attribut 'disabled' en CSS ?

L'attribut disabled est un attribut booléen.L'attribut disabled est souvent utilisé avec des éléments de formulaire.Lorsque l'attribut disabled est défini, il affecte l'élément et ses enfants.L'attribut disabled ne peut pas être utilisé avec des boutons.L'attribut disabled ne peut désactiver que les champs de saisie de texte.

CSS :pseudo-classe :disabled ​

Version ​

Syntaxe ​

Exemple de définition d'une couleur d'arrière-plan pour un élément <input> désactivé : ​

Exemple de définition d'une couleur d'arrière-plan pour des éléments <option> désactivés : ​

Exemple d'un élément <input> désactivé : ​

Pratique ​

CSS :pseudo-classe :disabled

Version

Syntaxe

Exemple de définition d'une couleur d'arrière-plan pour un élément `<input>` désactivé :

Exemple de définition d'une couleur d'arrière-plan pour des éléments `<option>` désactivés :

Exemple d'un élément `<input>` désactivé :

Pratique