:disabled

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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:

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 Standard # selector-disabled
Selectors Level 4 # enableddisabled

Совместимость с браузерами

BCD tables only load in the browser

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

:enabled