:indeterminate

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 para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:indeterminateChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 2IE Soporte completo 10Opera Soporte completo SiSafari Soporte completo 3WebView Android Soporte completo ≤37Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 1Samsung Internet Android Soporte completo 1.0
type="checkbox"Chrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 3.6IE Soporte completo 10Opera Soporte completo 10.6Safari Soporte completo 3WebView Android Soporte completo ≤37Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo 11Safari iOS Soporte completo 1Samsung Internet Android Soporte completo 1.0
<progress>Chrome Soporte completo 6Edge Soporte completo 12Firefox Soporte completo 6IE Soporte completo 10Opera Soporte completo 15Safari Soporte completo 5.1WebView Android Soporte completo 37Chrome Android Soporte completo 18Firefox Android Soporte completo 6Opera Android Soporte completo 14Safari iOS Soporte completo 5Samsung Internet Android Soporte completo 1.0
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 Soporte completo 26Safari Sin soporte No
Notas
Sin soporte No
Notas
Notas See WebKit bug 156270.
WebView Android Soporte completo 39Chrome Android Soporte completo 39Firefox Android Soporte completo 51Opera Android ? Safari iOS Sin soporte No
Notas
Sin soporte No
Notas
Notas See WebKit bug 156270.
Samsung Internet Android Soporte completo 4.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Ver notas de implementación.
Ver notas de implementación.