:disabled

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 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 # selector-disabled
Selectors Level 4 # disabled-pseudo

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

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

:enabled

Help improve MDN

Learn how to contribute

This page was last modified on ⁨18 нояб. 2025 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content