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
|
---
title: ':indeterminate'
slug: 'Web/CSS/:indeterminate'
tags:
- CSS
- Layout
- Pseudo-class
- Reference
- Web
translation_of: 'Web/CSS/:indeterminate'
---
<div>{{CSSRef}}</div>
<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:indeterminate</code></strong> representa qualsevol element de formulari, l'estat del qual, sigui indeterminat.</p>
<pre class="brush: css no-line-numbers">/* Selecciona qualsevol <input> l'estat del qual sigui indeterminat */
input:indeterminate {
background: lime;
}</pre>
<p>Els elements als quals apunta aquest selector són:</p>
<ul>
<li><code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> elements en què la propietat <code>indeterminate</code> està establert a <code>true</code> per <a href="/en-US/docs/Web/JavaScript">JavaScript.</a></li>
<li><code><a href="/en-US/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code> elements, que quan tots els botons d'opció tenen el mateix valor <code>name</code>, en el formulari, no estan marcats.</li>
<li>{{HTMLElement("progress")}} elements en un estat indeterminat.</li>
</ul>
<h2 id="Sintaxi">Sintaxi</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="Checkbox_radio_button">Checkbox & radio button</h3>
<p><span id="result_box" lang="ca"><span>Aquest exemple aplica estils especials a les etiquetes associades a camps de formulari indeterminats.</span></span></p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div>
<input type="checkbox" id="checkbox">
<label for="checkbox">This label starts out lime.</label>
</div>
<div>
<input type="radio" id="radio">
<label for="radio">This label starts out lime.</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>
<p>{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}</p>
<h3 id="Progress_bar">Progress bar</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="Resultat">Resultat</h3>
<p>{{EmbedLiveSample('Progress_bar', 'auto', 30)}}</p>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Sense canvis</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Defineix la semàntica d'HTML i la validició de restriccions</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Sense canvis</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td><span id="result_box" lang="ca"><span>Defineix</span> <span>la</span> <span>pseudo</span><span>-</span><span>class,</span> <span>però no</span> <span>la semàntica</span> <span>associada.</span></span></td>
</tr>
</tbody>
</table>
<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>
<div>
<p>{{Compat("css.selectors.indeterminate")}}</p>
</div>
|
