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
135
136
137
|
---
title: ':default'
slug: 'Web/CSS/:default'
translation_of: 'Web/CSS/:default'
---
<div>{{CSSRef}}</div>
<p> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Псевдо-классы">псевдо-класс</a> <strong><code>:default</code></strong> находит элемент формы, установленный по умолчанию для группы связаных элементов.</p>
<p>Этот селектор используется для элементов: {{htmlelement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, и {{htmlelement("option")}} .</p>
<pre class="brush: css no-line-numbers">/* Выбрать установленный по умолчанию среди <input> */
input:default {
background-color: lime;
}</pre>
<p>Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс <code>:default</code> найдет <em>все</em> эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox"><strong><code>:default</code></strong>
</pre>
<h2 id="Пример">Пример</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><input type="radio" name="season" id="spring">
<label for="spring">Spring</label>
<input type="radio" name="season" id="summer" checked>
<label for="summer">Summer</label>
<input type="radio" name="season" id="fall">
<label for="fall">Fall</label>
<input type="radio" name="season" id="winter">
<label for="winter">Winter</label></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">input:default {
box-shadow: 0 0 2px 1px coral;
}
input:default + label {
color: coral;
}
</pre>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample("Example")}}</p>
<h2 id="Спецификация">Спецификация</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#selector-default', ':default')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Без изменений.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Определяет связанную семантику HTML и проверку ограничений.</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Без изменений.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Первоначальное определение, но не определяет семантику </td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая потдержка</td>
<td>10.0</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>{{CompatNo}}</td>
<td>10.0</td>
<td>5.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая потдержка</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("2.0")}}</td>
<td>{{CompatNo}}</td>
<td>10.0</td>
<td>5.0</td>
</tr>
</tbody>
</table>
</div>
|
