:disabled

Псевдоклас CSS :disabled (вимкнений) представляє будь-який вимкнений елемент. Елемент є вимкненим, якщо його не можна активувати (вибрати, клацнути його, надрукувати щось у нього тощо) або передати йому фокус. Такий елемент також має увімкнений стан, у якому він може бути активований та прийняти фокус.

Спробуйте його в дії

Синтаксис

:disabled {
  /* ... */
}

Приклади

Цей приклад демонструє базову форму доставлення. Він використовує подію JavaScript change, щоб дати користувачам змогу вмикати та вимикати поля для рахунків.

HTML

<form action="#">
  <fieldset id="shipping">
    <legend>Адреса для доставлення</legend>
    <input type="text" placeholder="Ім'я" />
    <input type="text" placeholder="Адреса" />
    <input type="text" placeholder="Поштовий індекс" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>Адреса для рахунків</legend>
    <label for="billing-checkbox">Така ж, як адреса для доставлення:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="Ім'я" disabled />
    <input type="text" placeholder="Адреса" disabled />
    <input type="text" placeholder="Поштовий індекс" disabled />
  </fieldset>
</form>

CSS

input[type="text"]:disabled {
  background: #ccc;
}

JavaScript

Перемкнути вимкненість полів введення, коли клацнуто полем для галочки

const checkbox = document.querySelector("#billing-checkbox");
const billingItems = document.querySelectorAll('#billing input[type="text"]');

checkbox.addEventListener("change", () => {
  billingItems.forEach((item) => {
    item.disabled = !item.disabled;
  });
});

Результат

Додайте чи приберіть галочку, щоб змінити оформлення полів оплати.

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
:disabled
Chrome Full support 1
Edge Full support 12
footnote
Firefox Full support 1
Internet Explorer Full support 9
footnote
Opera Full support 9
Safari Full support 3.1
WebView Android Full support 2
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 2
Samsung Internet Full support 1.0

Дивіться також