: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;
});
});
Результат
Додайте чи приберіть галочку, щоб змінити оформлення полів оплати.
Специфікації
Специфікація |
---|
HTML Standard (HTML) # selector-disabled |
Selectors Level 4 (Selectors 4) # enableddisabled |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:disabled
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 9 | 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 |