Pseudo Classe CSS :indeterminate

La pseudo-classe CSS :indeterminate sélectionne un élément d'interface de l'utilisateur qui a un état indéterminé.

La pseudo-classe sélectionne :indeterminate sélectionne des cases, boutons de radio, éléments de progrès.

L'état indéterminé de la case ne peut être défini que via JavaScript. Les boutons radio et les éléments de progrès peuvent être définis en HTML.

Version

CSS3

Syntaxe

:indeterminate {
  css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      input:indeterminate {
      box-shadow: 0 0 2px 2px #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur indeterminate</h2>
    <form>
      <input type="checkbox" id="box"> Checkbox
      <script>
        var checkbox = document.getElementById("box");
        checkbox.indeterminate = true;
      </script>
    </form>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple suivant, la groupe entière est un état indéterminé dans lequel aucun option n'est sélectée.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      label {
      margin-right: .5em;
      position: relative;
      top: 1px;
      }
      input[type="radio"]:indeterminate + label {
      color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :indeterminate</h2>
    <form>
      <input type="radio" name="option" value="yes" id="yes"> 
      <label for="yes">Oui</label>
      <input type="radio" name="option" value="no" id="no"> 
      <label for="no">Non</label>
      <input type="radio" name="option" value="don't know" id="don't-know"> 
      <label for="don't-know">Ne sais pas</label>
    </form>
  </body>
</html>