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.
Recommendation Define la pseudo-clase, pero no la semántica asociada.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android ? Safari iOS ? Samsung Internet Android ?
type="checkbox"Chrome ? Edge Soporte completo SiFirefox Soporte completo 3.6IE Soporte completo 9Opera Soporte completo 10.6Safari Soporte completo 3WebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android ? Safari iOS ? Samsung Internet Android ?
type="radio"Chrome Soporte completo 39Edge Sin soporte No
Notas
Sin soporte No
Notas
Notas See Edge bug 7124038.
Firefox Soporte completo 51IE Sin soporte NoOpera ? Safari Sin soporte No
Notas
Sin soporte No
Notas
Notas See WebKit bug 156270.
WebView Android Soporte completo 39Chrome Android ? Edge Mobile Sin soporte No
Notas
Sin soporte No
Notas
Notas See Edge bug 7124038.
Firefox Android Soporte completo 51Opera Android ? Safari iOS Sin soporte No
Notas
Sin soporte No
Notas
Notas See WebKit bug 156270.
Samsung Internet Android ?
<progress>Chrome Soporte completo 6Edge Soporte completo SiFirefox Soporte completo 6IE Soporte completo 10Opera ? Safari Soporte completo SiWebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 6Opera Android ? Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.

Etiquetas y colaboradores del documento

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