From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/_colon_indeterminate/index.html | 134 +++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 files/es/web/css/_colon_indeterminate/index.html (limited to 'files/es/web/css/_colon_indeterminate') diff --git a/files/es/web/css/_colon_indeterminate/index.html b/files/es/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..ff56f97c85 --- /dev/null +++ b/files/es/web/css/_colon_indeterminate/index.html @@ -0,0 +1,134 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:indeterminate' +--- +
{{CSSRef}}
+ +

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

+ +
{{csssyntax}}
+ +

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

+ +

{{EmbedLiveSample('Checkbox_y_radio_button', 'auto', 50)}}

+ +

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

+ +

{{EmbedLiveSample('Barra_de_progreso', 'auto', 30)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Define la semántica de HTML y la validación de restricciones.
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 Basic UI')}}Define la pseudo-clase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.indeterminate")}}

+
-- cgit v1.2.3-54-g00ecf