CSS псевдокласс :disabled
Используйте псевдокласс CSS :disabled для выбора и стилизации отключённых элементов. Синтаксис, примеры и практика.
Псевдокласс :disabled выбирает и стилизует каждый элемент, который в данный момент отключён — то есть элемент, с которым пользователь не может взаимодействовать. Элемент управления становится отключённым, когда он содержит HTML-атрибут disabled, поэтому :disabled позволяет придать таким элементам отчётливый вид «нельзя использовать» без добавления дополнительного класса.
![Пример использования псевдокласса CSS :disabled](https://api.w3docs.com/uploads/media/default/0001/03/ced1796b1077a7b96196914b14dfc04aa89805ab.png "Пример псевдокласса CSS :disabled" =420x)
На этой странице рассматривается, что считается отключённым элементом, синтаксис селектора, как :disabled соотносится со своей противоположностью :enabled, разница между disabled и readonly, а также набор выполняемых примеров стилизации.
Какие элементы можно отключить
Только элементы, которые могут быть отключены изначально, соответствуют :disabled. Это интерактивные элементы управления формами:
<button><input>(все типы)<select>и его<option>/<optgroup><textarea><fieldset>— отключение<fieldset>отключает все элементы управления внутри него
Отключённый элемент управления ведёт себя иначе, чем обычный:
- Он не принимает клики, ввод текста или фокус с клавиатуры.
- Его значение не отправляется вместе с формой.
- Он не проходит валидацию браузера, поэтому
:valid/:invalidк нему не применяются.
Обычные текстовые элементы, такие как <p> или <div>, нельзя отключить, поэтому они никогда не соответствуют :disabled.
:disabled и :enabled
:disabled и :enabled — зеркальные противоположности. Любой элемент управления, который может быть отключён, в каждый момент времени соответствует ровно одному из них: :enabled — когда он интерактивен, :disabled — когда атрибут disabled присутствует. Стилизация обоих даёт пользователю чёткий визуальный контраст между доступными и недоступными элементами управления.
disabled и readonly
Эти два атрибута похожи, но не одинаковы:
disabled | readonly | |
|---|---|---|
| Пользователь может установить фокус | Нет | Да |
| Пользователь может редактировать значение | Нет | Нет |
| Значение отправляется с формой | Нет | Да |
| Соответствует | :disabled | :read-only |
Используйте disabled, чтобы полностью отключить элемент управления; используйте readonly (см. :read-only), когда значение должно оставаться видимым и отправляться, но не редактироваться.
Синтаксис
Используемый самостоятельно, :disabled нацелен на любой отключённый элемент управления. Комбинируйте его с типом или селектором атрибута для большей конкретики:
/* every disabled control */
:disabled {
/* css declarations */
}
/* only disabled text inputs */
input[type="text"]:disabled {
background: #ccc;
cursor: not-allowed;
}Пример задания цвета фона для отключённого элемента <input>:
CSS :disabled code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
padding: 2px 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #ccc;
}
</style>
</head>
<body>
<h2>:disabled selector example for input</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>Пример задания цвета фона для отключённых элементов <option>:
CSS :disabled another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
option:disabled {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:disabled selector example for option</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>Примечание: Псевдокласс
:disabledимеет приоритет над:validи:invalid. Отключённые элементы форм не проходят валидацию браузера.
Пример отключённого элемента <input>:
Example of disabled input element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
width: 60%;
margin: 0;
border: none;
outline: 1px solid lightgrey;
outline-offset: 2px;
}
input:disabled {
background: #cccccc;
cursor: not-allowed;
}
form {
background: #67a6ec;
padding: 1.5em;
max-width: 400px;
width: 100%;
outline: 10px solid rgba(17, 58, 103, 0.6);
}
hr {
visibility: hidden;
}
label {
margin-right: 3%;
text-align: left;
display: inline-block;
width: 35%;
}
</style>
</head>
<body>
<h2>:disabled selector example with styling</h2>
<form action="#">
<label for="name">Enabled Input:</label>
<input type="text" autofocus />
<hr />
<label for="name">Disabled Input:</label>
<input type="text" disabled />
</form>
</body>
</html>Примечание о доступности
Поскольку отключённый элемент управления не может получить фокус, пользователи клавиатуры и программ чтения с экрана просто пропускают его и не получают объяснения, почему он недоступен. Не полагайтесь только на визуальное затемнение — когда причина важна, добавьте поблизости вспомогательный текст, или оставьте элемент управления включённым и выполняйте валидацию при отправке. Также обеспечьте достаточный контраст для отключённого текста, чтобы он оставался читаемым.
Связанные псевдоклассы
:enabled— противоположное состояние: элементы управления, с которыми пользователь может взаимодействовать.:read-onlyи:read-write— для полей только для чтения (readonly).:required— элементы управления, которые необходимо заполнить.:validи:invalid— состояния валидации формы.:checked— выбранные флажки, переключатели и опции.:focus— элемент, который в данный момент имеет фокус клавиатуры.