:disabled
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 псевдокласс :disabled находит любой отключённый элемент. Элемент отключён, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включённое состояние, когда его можно активировать или сфокусировать.
Примеры
Пример селекторов
- input:disabled
-
Выберет все отключённые поля ввода
- select.country:disabled
-
Найдёт все отключённые
selectэлементы с классомcountry
Пример использования
Следующий CSS:
css
input[type="text"]:disabled { background: #ccc; } Применим к этому HTML5 фрагменту:
html
<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:
js
function toggleBilling() { var billingItems = document.querySelectorAll('#billing input[type="text"]'); for (var i = 0; i < billingItems.length; i++) { billingItems[i].disabled = !billingItems[i].disabled; } } Результатом будет отключение всех полей в группе адреса оплаты и окраска их в серый цвет.
Спецификации
| Specification |
|---|
| HTML # selector-disabled |
| Selectors Level 4 # disabled-pseudo |