:enabled
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
Описание
CSS псевдокласс :enabled находит любой включённый элемент. Элемент включён, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключённое состояние, когда его нельзя активировать или сфокусировать.
Пример
Следующий пример делает цвет текста средне-зелёного оттенка, когда поле включено, и серым, когда отключено. Это позволяет понимать пользователю какие элементы интерактивны, а какие нет.
Следующий HTML...
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...
css
input:enabled { color: #22aa22; } input:disabled { color: #d9d9d9; } ...результат:
Заметьте, цвет текста кнопки также зелёный, так как она тоже включена.
Спецификации
| Specification |
|---|
| HTML # selector-enabled |
| Selectors Level 4 # enabled-pseudo |
Совместимость с браузерами
Loading…