:enabled

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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 Standard
# selector-enabled
Selectors Level 4
# enableddisabled

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также