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
|
---
title: ':indeterminate'
slug: 'Web/CSS/:indeterminate'
tags:
- CSS
- Псевдо-класс
- Разметка
translation_of: 'Web/CSS/:indeterminate'
---
<p>{{CSSRef}}</p>
<p><a href="/ru/docs/Web/CSS">CSS</a><a href="/ru/docs/Web/CSS/Псевдо-классы"> псевдо-класс</a> <strong><code>:indeterminate</code></strong> находит элементы в неопределённом состоянии.</p>
<pre class="brush: css no-line-numbers">/* Выбирает все элементы <input>, которые находятся в неопределенном состоянии */
input:indeterminate {
background: lime;
}</pre>
<p>Селектор находит следующие элементы:</p>
<ul>
<li>Элементы <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, свойство <code>indeterminate</code> которых было установлено в <code>true</code> через <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>, когда все радио переключатели в одной группе (с одинаковым атрибутом <code>name</code>) невыбраны</li>
<li>Элементы {{HTMLElement("progress")}} в неопределённом состоянии</li>
</ul>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Примеры">Примеры</h2>
<h3 id="Чекбокс_и_радио_переключатели">Чекбокс и радио переключатели</h3>
<p>В этом примере специальные стили применяются к меткам, которые привязаны к неопределенным полям формы.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div>
<input type="checkbox" id="checkbox">
<label for="checkbox">Эта метка будет зелёной.</label>
</div>
<div>
<input type="radio" id="radio">
<label for="radio">Эта метка будет зелёной.</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="Полоса_прогресса">Полоса прогресса</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="Результат">Результат</h3>
<p>{{EmbedLiveSample('Progress_bar', 'auto', 30)}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Нет изменений.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Определение семантики HTML и проверки.</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Нет изменений.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Определён псевдо-класс, но не семантика.</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<div>
<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
<p>{{Compat("css.selectors.indeterminate")}}</p>
</div>
|
