:indeterminate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

css

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

Los elementos seleccionados por este selector son:

Elementos <input type="checkbox"> cuya propiedad indeterminate se establece en true por JavaScript
Elementos <input type="radio">, cuando todos los radio buttons con el mismo valor name en el formulario no están marcados
Elementos <progress> en un estado indeterminado

Sintaxis

Error: could not find syntax for this item

Ejemplos

Checkbox y radio button

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

HTML

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

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

html

<progress></progress>

CSS

css

progress {
  margin: 4px;
}

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

Resultado

Especificaciones

Specification
HTML # selector-indeterminate
Selectors Level 4 # indeterminate-pseudo

Compatibilidad con navegadores

BCD tables only load in the browser