Описание
CSS псевдо-класс :disabled
находит любой отключенный элемент. Элемент отключен, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включенное состояние, когда его можно активировать или сфокусировать.
Примеры
Пример селекторов
- input:disabled
- Выберет все отключенные поля ввода
- select.country:disabled
- Найдёт все отключенные
select
элементы с классомcountry
Пример использования
Следующий CSS:
input[type="text"]:disabled { background: #ccc; }
Применим к этому HTML5 фрагменту:
<form action="#">
<fieldset>
<legend>Адрес доставки</legend>
<input type="text" placeholder="Имя">
<input type="text" placeholder="Адрес">
<input type="text" placeholder="Почтовый индекс">
</fieldset>
<fieldset id="billing">
<legend>Адрес оплаты</legend>
<label for="billing_is_shipping">Такой же как адрес доставки:</label>
<input type="checkbox" onchange="javascript:toggleBilling()" checked>
<br />
<input type="text" placeholder="Имя" disabled>
<input type="text" placeholder="Адрес" disabled>
<input type="text" placeholder="Почтовый индекс" disabled>
</fieldset>
</form>
Добавим немного javascript:
function toggleBilling() {
var billingItems = document.querySelectorAll('#billing input[type="text"]');
for (var i = 0; i < billingItems.length; i++) {
billingItems[i].disabled = !billingItems[i].disabled;
}
}
Результатом будет отключение всех полей в группе адреса оплаты и окраска их в серый цвет.
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение ':disabled' в этой спецификации. |
Живой стандарт | Без изменений |
HTML5 Определение ':disabled' в этой спецификации. |
Рекомендация | Определяет семантику HTML и форм. |
Selectors Level 4 Определение ':disabled' в этой спецификации. |
Рабочий черновик | Без изменений |
CSS Basic User Interface Module Level 3 Определение ':disabled' в этой спецификации. |
Рекомендация | Отсылка к Селекторам Уровня 3 |
Selectors Level 3 Определение ':disabled' в этой спецификации. |
Рекомендация | Определяет псевдо-класс, но не семантику. |
Поддержка браузерами
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Возможность | 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 |