MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

: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;
  }
}

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

Спецификации

Спецификация Статус Комментарий
WHATWG HTML Living Standard
Определение ':disabled' в этой спецификации.
Живой стандарт Без изменений
HTML5
Определение ':disabled' в этой спецификации.
Рекомендация Определяет семантику HTML и форм.
Selectors Level 4
Определение ':disabled' в этой спецификации.
Рабочий черновик Без изменений
CSS Basic User Interface Module Level 3
Определение ':disabled' в этой спецификации.
Кандидат в рекомендации Отсылка к Селекторам Уровня 3
Selectors Level 3
Определение ':disabled' в этой спецификации.
Рекомендация Определяет псевдо-класс, но не семантику.

Поддержка браузерами

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

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

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: BychekRU
 Обновлялась последний раз: BychekRU,