CSS псевдокласс :enabled
Используйте псевдокласс CSS :enabled для выбора и стилизации активных элементов. Узнайте о псевдоклассе и попрактикуйтесь на примерах.
CSS псевдокласс :enabled соответствует любому элементу формы, который в данный момент активен — то есть его можно задействовать (кликнуть, ввести текст или сфокусировать) и он принимает пользовательский ввод. Он является прямой противоположностью :disabled.
Элемент считается «активным», если он относится к типу элементов, поддерживающих состояние disabled, и при этом атрибут disabled у него не установлен. На этой странице рассматривается, когда применяется :enabled, каких элементов он касается, типичные подводные камни и два практических примера.
Какие элементы могут быть активными
:enabled нацелен только на те элементы, которые действительно можно отключить. Это интерактивные элементы управления формой:
<button><input>(все типы)<select><textarea><option><optgroup><fieldset>
Элементы <div>, <p> или ссылки никогда не могут быть «активными» или «отключёнными» в этом смысле, поэтому :enabled никогда не будет им соответствовать — даже если они являются интерактивными.
Зачем это использовать
По умолчанию активный элемент управления уже выглядит рабочим, поэтому :enabled редко нужен сам по себе. Он становится полезным, когда нужен чёткий визуальный контраст между доступными и недоступными элементами управления — например, выделить поля, которые пользователь может заполнить, тогда как :disabled делает недоступные поля серыми. Совместное использование этих двух псевдоклассов делает интерактивность формы очевидной с первого взгляда.
На что обратить внимание
- Состояние по умолчанию. Поскольку элементы управления по умолчанию активны,
:enabledсоответствует им до тех пор, пока вы явно не добавите атрибутdisabled. Установкаdisabledв HTML или через JavaScript (element.disabled = true) переключает элемент из:enabledв:disabled. <fieldset disabled>распространяется на дочерние элементы. Отключение<fieldset>отключает все вложенные в него элементы управления, поэтому они перестают соответствовать:enabledдаже без собственного атрибутаdisabled.- Только для чтения — не то же самое, что отключено. Элемент
<input readonly>по-прежнему активен — он соответствует:enabled, а не:disabled. Для стилизации элементов только для чтения используйте:read-only.
Версия
Синтаксис
Пример синтаксиса CSS :enabled
:enabled {
css declarations;
}Пример использования селектора :enabled:
Пример кода CSS :enabled
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 2px 5px;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #ccc;
}
</style>
</head>
<body>
<h2>:enabled selector example</h2>
<form action="#">
<label for="name">First name:</label>
<input type="text" value="John" id="name" />
<br />
<label for="lastname">Last name:</label>
<input type="text" value="Smith" id="lastname" />
<br />
<label for="country">Country:</label>
<input type="text" disabled="disabled" value="10 High Street" id="country" />
</form>
</body>
</html>Пример использования селектора :enabled с тегом <option>:
Ещё один пример кода CSS :enabled
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
option:enabled {
background: #d4f7d4;
color: #064;
}
option:disabled {
background: #f0f0f0;
color: #aaa;
}
</style>
</head>
<body>
<h2>:enabled selector example</h2>
<select>
<option value="paris">Paris</option>
<option value="london" disabled>London</option>
<option value="moscow">Moscow</option>
<option value="rome" disabled>Rome</option>
<option value="berlin">Berlin</option>
</select>
</body>
</html>Обратите внимание, что браузеры ограничивают возможности перестилизации элементов <select> и <option>, поэтому точное отображение этих цветов отличается в разных браузерах и операционных системах.
Поддержка браузерами
Псевдокласс :enabled поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari и Edge.
Связанные псевдоклассы
:disabled— противоположность:enabled; соответствует элементам управления, которые нельзя использовать.:read-only— соответствует элементам управления, которые пользователь не может редактировать (примечание: по-прежнему:enabled).:checked— соответствует выбранным флажкам, переключателям и опциям.:required— соответствует элементам формы, которые обязательны для заполнения.:focus— соответствует элементу управления, который в данный момент находится в фокусе клавиатуры.