CSS : La pseudo-classe :indeterminate

La pseudo-classe CSS :indeterminate sélectionne un élément d'interface utilisateur qui se trouve dans un état indterminé.

La pseudo-classe :indeterminate sélectionne :

Les cases à cocher (<input type="checkbox">) dont la propriété DOM indeterminate est définie sur true.
Les boutons radio (<input type="radio">) lorsqu'aucune option du groupe n'est sélectionnée.
Les éléments de progression (<progress>) lorsque l'attribut value est omis.

INFO

L'état :indeterminate est en lecture seule en CSS. Pour les cases à cocher, il doit être défini via JavaScript. Les boutons radio et les éléments de progression affichent cet état dans des conditions spécifiques. Si un formulaire est réinitialisé, la propriété indeterminate d'une case à cocher est effacée.

La :checked pseudo-classe est utilisée pour styliser l'état coché des cases à cocher et des boutons radio. La pseudo-classe :indeterminate peut être associée à d'autres sélecteurs tels que :hover, permettant d'appliquer des styles au survol pour l'élément qui se trouve dans un état indterminé.

Version

CSS Basic User Interface Module Level 3

CSS Selectors Level 4

Disabled Elements — HTML5

Syntaxe

Exemple de syntaxe CSS :indeterminate

css

:indeterminate {
  css declarations;
}

Exemple du sélecteur :indeterminate :

Exemple de code CSS :indeterminate

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:indeterminate {
        box-shadow: 0 0 2px 2px #666;
      }
    </style>
  </head>
  <body>
    <h2>Indeterminate selector example</h2>
    <form>
      <input type="checkbox" id="box" /> Checkbox
      <script>
        var checkbox = document.getElementById("box");
        checkbox.indeterminate = true;
      </script>
    </form>
  </body>
</html>

Try it Yourself »

Dans l'exemple suivant, tout le groupe est dans un état indterminé lorsqu'aucune option n'est sélectionnée.

Exemple du sélecteur :indeterminate sans option sélectionnée :

Autre exemple de code CSS :indeterminate

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label {
        margin-right: .5em;
        position: relative;
        top: 1px;
      }
      input[type="radio"]:indeterminate + label {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:indeterminate selector example</h2>
    <form>
      <input type="radio" name="option" value="yes" id="yes" />
      <label for="yes">Yes</label>
      <input type="radio" name="option" value="no" id="no" />
      <label for="no">No</label>
      <input type="radio" name="option" value="don't know" id="don't-know" />
      <label for="don't-know">Don't know</label>
    </form>
  </body>
</html>

Try it Yourself »

Pratique

Parmi les affirmations suivantes concernant l'attribut indeterminate en CSS, laquelle est correcte ?

Il s'agit d'un attribut booléen.Il s'applique exclusivement à l'élément <input>Il n'affecte pas le comportement du champ ; il modifie simplement son apparence.Il réduit l'opacité de l'élément d'entrée.Il peut être utilisé pour les cases à cocher et les boutons radio.Il n'est compatible qu'avec HTML5.

CSS : La pseudo-classe :indeterminate ​

Version ​

Syntaxe ​

Exemple du sélecteur :indeterminate : ​