:indeterminate

La pseudo-class CSS :indeterminate representa qualsevol element de formulari, l'estat del qual, sigui indeterminat.

/* Selecciona qualsevol <input> l'estat del qual sigui indeterminat */
input:indeterminate {
  background: lime;
}

Els elements als quals apunta aquest selector són:

• <input type="checkbox"> elements en què la propietat indeterminate està establert a true per JavaScript.
• <input type="radio"> elements, que quan tots els botons d'opció tenen el mateix valor name, en el formulari, no estan marcats.
• <progress> elements en un estat indeterminat.

Sintaxi

:indeterminate

Exemples

Checkbox & radio button

Aquest exemple aplica estils especials a les etiquetes associades a camps de formulari indeterminats.

HTML

<div>
  <input type="checkbox" id="checkbox">
  <label for="checkbox">This label starts out lime.</label>
</div>
<div>
  <input type="radio" id="radio">
  <label for="radio">This label starts out lime.</label>
</div>

CSS

input:indeterminate + label {
  background: lime;
}

JavaScript

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}

Progress bar

HTML

<progress>

CSS

progress {
  margin: 4px;
}

progress:indeterminate {
  opacity: 0.5;
  background-color: lightgray;
  box-shadow: 0 0 2px 1px red;
}

Resultat

Especificacions

Navegadors compatibles