:indeterminatees un selector de pseudo-clase en CSS con el nombre de un estado que no está marcado ni desmarcado. Es ese estado intermedio que podríamos considerar las opciones "Quizás" entre "Sí" y "No". El estado no está completamente determinado, de ahí el nombre: indeterminado.
Casillas de verificación indeterminadas
El lugar más común en el que podemos ver esto en juego es con casillas de verificación en un formulario:
Hay algunas cosas extravagantes sobre las :indeterminatecasillas de verificación que vale la pena señalar antes de profundizar en cómo se pueden seleccionar en CSS.
No se puede configurar en HTML
En primer lugar, no hay forma de establecer una casilla de verificación en un estado indeterminado en HTML. En el ejemplo de apertura anterior, pudimos establecer la segunda casilla de verificación como marcada al decirlo explícitamente en el HTML.
Es lógico suponer que podríamos hacer lo mismo con un estado indeterminado:
Pero, lamentablemente, ese no es el caso, así que no use ese último ejemplo en su código.
En el momento de escribir este artículo, Javascript es el único medio para establecer un estado indeterminado en una casilla de verificación. Una forma de hacerlo es seleccionar una casilla de verificación específica por ID:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;La limitación del ejemplo anterior es que la casilla de verificación nunca puede volver a un estado indeterminado una vez que cambia a otro estado. En cambio, podemos rotar entre estados marcado, no marcado e indeterminado:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Consulte los estados de las casillas de verificación de rotación de la pluma de Geoff Graham (@geoffgraham) en CodePen.
Es un estado puramente visual
Una casilla de verificación solo cuenta si se ha marcado o no, independientemente de si hemos activado un estado indeterminado. En otras palabras, indeterminado enmascara el valor real de la casilla de verificación y no cuenta como un valor propio.
Su apariencia predeterminada es inconsistente en todos los navegadores.
Al igual que las entradas numéricas, un estado indeterminado no tiene un estilo uniforme en todos los navegadores.
En general, sin embargo, aquí está el soporte para casillas de verificación indeterminadas.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Botones de radio indeterminados
:indeterminate se puede aplicar a los botones de opción a nivel de grupo, donde se considera que todo el grupo está en un estado indeterminado si no se selecciona ninguna opción.
Vea los botones de radio Pen Inderminate de Geoff Graham (@geoffgraham) en CodePen.
Debemos tener en cuenta que el uso :indeterminatepuede no ser la mejor opción en lo que respecta a la experiencia del usuario.
Barras de progreso indeterminadas
También podemos aplicar :indeterminateal elemento donde no se ha establecido ningún valor explícitamente en el HTML. No hay necesidad de Javascript, pero diseñar el elemento es en sí mismo algo complicado que requiere mucho trabajo y consideración para la coherencia entre navegadores.
Consulte el elemento de progreso indeterminado de la pluma de Geoff Graham (@geoffgraham) en CodePen.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10,3 |
Más información
- Borrador de trabajo de nivel 4 de selectores CSS
- Casillas de verificación indeterminadas
- Botones de radio indeterminados
- Elemento de progreso HTML5