:disabled

Описание

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! (en-US)

Возможность 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

Смотрите также