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

Результат

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

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

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

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

• :enabled