1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
title: ':indeterminate'
slug: 'Web/CSS/:indeterminate'
tags:
- CSS
- Diseño
- Pseudo-clase
- Referencia
- Web
translation_of: 'Web/CSS/:indeterminate'
---
<div>{{CSSRef}}</div>
<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:indeterminate</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento de formulario cuyo estado sea indeterminado.</p>
<pre class="brush: css no-line-numbers">/* Selecciona cualquier <input> cuyo estado sea indeterminado */
input:indeterminate {
background: lime;
}</pre>
<p>Los elementos seleccionados por este selector son:</p>
<ul>
<li>Elementos <code><a href="/es/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> cuya propiedad <code>indeterminate</code> se establece en <code>true</code> por <a href="/es/docs/Web/JavaScript">JavaScript</a></li>
<li>Elementos <code><a href="/es/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, cuando todos los radio buttons con el mismo valor <code>name</code> en el formulario no están marcados</li>
<li>Elementos {{HTMLElement("progress")}} en un estado indeterminado</li>
</ul>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="Checkbox_y_radio_button">Checkbox y radio button</h3>
<p>Este ejemplo aplica estilos especiales a las etiquetas asociadas con campos de formulario indeterminados.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; hightlight[5]">input:indeterminate + label {
background: lime;
}
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
</pre>
<h3 id="Resultado">Resultado</h3>
<p>{{EmbedLiveSample('Checkbox_y_radio_button', 'auto', 50)}}</p>
<h3 id="Barra_de_progreso">Barra de progreso</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><progress>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css; hightlight[5]">progress {
margin: 4px;
}
progress:indeterminate {
opacity: 0.5;
background-color: lightgray;
box-shadow: 0 0 2px 1px red;
}
</pre>
<h3 id="Resultado_2">Resultado</h3>
<p>{{EmbedLiveSample('Barra_de_progreso', 'auto', 30)}}</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Ningún cambio.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Define la semántica de HTML y la validación de restricciones.</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Ningún cambio.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Define la pseudo-clase, pero no la semántica asociada.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<div>
<p>{{Compat("css.selectors.indeterminate")}}</p>
</div>
|
