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

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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:disabled

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

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