: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>    <legend>Адрес оплаты</legend>    <label for="billing_is_shipping">Такой же как адрес доставки:</label>    <input type="checkbox" onchange="#" checked />    <br />    <input type="text" placeholder="Имя" disabled />    <input type="text" placeholder="Адрес" disabled />    <input type="text" placeholder="Почтовый индекс" disabled />  </fieldset></form>

Добавим немного #"text"]'); for (var i = 0; i < billingItems.length; i++) { billingItems[i].disabled = !billingItems[i].disabled; }}

Результатом будет отключение всех полей в группе адреса оплаты и окраска их в серый цвет.