La pseudo-clase :indeterminate de CSS representa cualquier elemento de formulario cuyo estado sea indeterminado.

/* Selecciona cualquier <input> cuyo estado sea indeterminado */
input:indeterminate {
  background: lime;
}

Los elementos seleccionados por este selector son:

Sintaxis

:indeterminate

Ejemplos

Checkbox y radio button

Este ejemplo aplica estilos especiales a las etiquetas asociadas con campos de formulario indeterminados.

HTML

<div>
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Esta etiqueta comienza con el color lima.</label>
</div>
<div>
  <input type="radio" id="radio">
  <label for="radio">Esta etiqueta comienza con el color lima.</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;
}

Resultado

Barra de progreso

HTML

<progress>

CSS

progress {
  margin: 4px;
}

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

Resultado

Especificaciones

Especificación Estado Comentarios
HTML Living Standard
La definición de ':indeterminate' en esta especificación.
Living Standard Ningún cambio.
HTML5
La definición de ':indeterminate' en esta especificación.
Recommendation Define la semántica de HTML y la validación de restricciones.
Selectors Level 4
La definición de ':indeterminate' en esta especificación.
Working Draft Ningún cambio.
CSS Basic User Interface Module Level 3
La definición de ':indeterminate' en esta especificación.
Proposed Recommendation Define la pseudo-clase, pero no la semántica asociada.

Compatibilidad con navegadores

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico Si Si Si Si Si Si
type="checkbox" ? Si3.6910.63
type="radio"39 No151 No ? No2
<progress>6 Si610 ? Si
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico ? ? Si Si ? ? ?
type="checkbox" ? ? Si4 ? ? ?
type="radio"39 ? No151 ? No2 ?
<progress> ? ? Si6 ? ? ?

1. See Edge bug 7124038.

2. See WebKit bug 156270.

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, israel-munoz
Última actualización por: lajaso,