Clase Pseudo CSS :indeterminate

La pseudoclase CSS :indeterminate selecciona un elemento de la interfaz de usuario que tiene un estado indeterminado.

La pseudoclase :indeterminate selecciona:

Casillas de verificación (<input type="checkbox">) donde la propiedad DOM indeterminate está establecida en true.
Botones de opción (<input type="radio">) cuando ninguna opción del grupo está seleccionada.
Elementos de progreso (<progress>) cuando se omite el atributo value.

INFO

El estado :indeterminate es de solo lectura en CSS. Para las casillas de verificación, debe establecerse mediante JavaScript. Los botones de opción y los elementos de progreso muestran este estado bajo condiciones específicas. Si se restablece un formulario, la propiedad indeterminate de una casilla de verificación se borra.

La :checked pseudoclase se utiliza para dar estilo al estado seleccionado de las casillas de verificación y los botones de opción. La pseudoclase :indeterminate se puede combinar con otros selectores como :hover, proporcionando estilos al pasar el cursor sobre el elemento que se encuentra en un estado indeterminado.

Versión

Módulo de Interfaz de Usuario Básica de CSS Nivel 3

Selectores CSS Nivel 4

Elementos deshabilitados — HTML5

Sintaxis

Ejemplo de sintaxis de CSS :indeterminate

css

:indeterminate {
  css declarations;
}

Ejemplo del selector :indeterminate:

Ejemplo de código CSS :indeterminate

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:indeterminate {
        box-shadow: 0 0 2px 2px #666;
      }
    </style>
  </head>
  <body>
    <h2>Indeterminate selector example</h2>
    <form>
      <input type="checkbox" id="box" /> Checkbox
      <script>
        var checkbox = document.getElementById("box");
        checkbox.indeterminate = true;
      </script>
    </form>
  </body>
</html>

Try it Yourself »

En el siguiente ejemplo, todo el grupo se encuentra en un estado indeterminado cuando no se selecciona ninguna opción.

Ejemplo del selector :indeterminate sin ninguna opción seleccionada:

Otro ejemplo de código CSS :indeterminate

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label {
        margin-right: .5em;
        position: relative;
        top: 1px;
      }
      input[type="radio"]:indeterminate + label {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:indeterminate selector example</h2>
    <form>
      <input type="radio" name="option" value="yes" id="yes" />
      <label for="yes">Yes</label>
      <input type="radio" name="option" value="no" id="no" />
      <label for="no">No</label>
      <input type="radio" name="option" value="don't know" id="don't-know" />
      <label for="don't-know">Don't know</label>
    </form>
  </body>
</html>

Try it Yourself »

Práctica

¿Cuál de las siguientes afirmaciones sobre el atributo indeterminate en CSS es correcta?

Es un atributo booleano.Se aplica exclusivamente al elemento <input>No afecta el comportamiento de la entrada; solo altera su apariencia.Reduce la opacidad del elemento de entrada.Se puede usar para casillas de verificación y botones de opción.Solo es compatible con HTML5.

Clase Pseudo CSS :indeterminate ​

Versión ​

Sintaxis ​

Ejemplo del selector :indeterminate: ​