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
|
---
title: ':enabled'
slug: 'Web/CSS/:enabled'
translation_of: 'Web/CSS/:enabled'
---
<div>{{CSSRef}}</div>
<h2 id="Описание">Описание</h2>
<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:enabled</code> находит любой включенный элемент. Элемент включен, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключенное состояние, когда его нельзя активировать или сфокусировать.</p>
<h2 id="Пример">Пример</h2>
<p>Следующий пример делает цвет текста средне-зелёного оттенка, когда поле включено, и серым, когда отключено. Это позволяет понимать пользователю какие элементы интерактивны, а какие нет.</p>
<div id="Enabled_Disabled_Inputs_Example">
<p>Следующий HTML...</p>
<pre class="brush:html"> <form action="url_of_form">
<label for="FirstField">Первое поле (включено):</label> <input type="text" id="FirstField" value="Lorem"><br />
<label for="SecondField">Второе поле (отключено):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
<input type="button" value="Submit" />
</form>
</pre>
<p>...используем со следующим CSS...</p>
<pre class="brush:css; highlight:[1,4]">input:enabled {
color: #22AA22;
}
input:disabled {
color: #D9D9D9;
}
</pre>
<p>...результат:</p>
<div>{{EmbedLiveSample("Enabled_Disabled_Inputs_Example",550,95)}}</div>
<div>Заметьте, цвет текста кнопки также зелёный, так как она тоже включена.</div>
</div>
<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-enabled', ':enabled')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Без изменений.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Определяет семантику HTML и форм.</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Без изменений.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Отсылка к Селекторам Уровня 3.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Определён псевдокласс, без семантики.</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1")}}</td>
<td>9.0</td>
<td>9.0</td>
<td>3.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</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>2.1</td>
<td>{{CompatGeckoMobile("1")}}</td>
<td>9.0</td>
<td>9.5</td>
<td>3.1</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{Cssxref(":disabled")}}</li>
</ul>
|
