Описание
CSS псевдо-класс :enabled находит любой включенный элемент. Элемент включен, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключенное состояние, когда его нельзя активировать или сфокусировать.
Пример
Следующий пример делает цвет текста средне-зелёного оттенка, когда поле включено, и серым, когда отключено. Это позволяет понимать пользователю какие элементы интерактивны, а какие нет.
Следующий 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>
...используем со следующим CSS...
input:enabled {
color: #22AA22;
}
input:disabled {
color: #D9D9D9;
}
...результат:
Заметьте, цвет текста кнопки также зелёный, так как она тоже включена.
Спецификации
| Спецификация | Статус | Комментарий |
|---|---|---|
| WHATWG HTML Living Standard Определение ':enabled' в этой спецификации. |
Живой стандарт | Без изменений. |
| HTML5 Определение ':enabled' в этой спецификации. |
Рекомендация | Определяет семантику HTML и форм. |
| Selectors Level 4 Определение ':enabled' в этой спецификации. |
Рабочий черновик | Без изменений. |
| CSS Basic User Interface Module Level 3 Определение ':enabled' в этой спецификации. |
Кандидат в рекомендации | Отсылка к Селекторам Уровня 3. |
| Selectors Level 3 Определение ':enabled' в этой спецификации. |
Рекомендация | Определён псевдо-класс, без семантики. |
Поддержка браузерами
| Возможность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Базовая поддержка | 1.0 | 1.0 (1.7 или ранее) | 9.0 | 9.0 | 3.1 |
| Возможность | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Базовая поддержка | 2.1 | 1.0 (1) | 9.0 | 9.5 | 3.1 |