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 propietatindeterminate
està establert atrue
per JavaScript.<input type="radio">
elements, que quan tots els botons d'opció tenen el mateix valorname
, 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
Especificació | Estat | Comentari |
---|---|---|
HTML Living Standard The definition of ':indeterminate' in that specification. |
Living Standard | Sense canvis |
HTML5 The definition of ':indeterminate' in that specification. |
Recommendation | Defineix la semàntica d'HTML i la validició de restriccions |
Selectors Level 4 The definition of ':indeterminate' in that specification. |
Working Draft | Sense canvis |
CSS Basic User Interface Module Level 3 The definition of ':indeterminate' in that specification. |
Recommendation | Defineix la pseudo-class, però no la semàntica associada. |
Navegadors compatibles
BCD tables only load in the browser