Справочник HTML & CSS

:disabled

Срабатывает у элементов формы с атрибутом `disabled`; `:enabled` — у активных.

Синтаксис

selector:disabled { … }

Примеры

Отключённая кнопка выглядит неактивной:

<style>
  button { padding: 8px 16px; background: royalblue; color: white; border: 0; }
  button:disabled { background: lightgray; color: gray; cursor: not-allowed; }
</style>
 
<button>Send</button>
<button disabled>Send</button>

Примечания

Оставляйте у отключённых элементов достаточный контраст, чтобы текст можно было прочитать. Отключённое поле не отправляется с формой; если нужно только запретить правку, берите readonly и :read-only.

См. также

:checked — Срабатывает у отмеченного флажка или переключателя и у выбранного `<option>`.
cursor — Вид указателя мыши над элементом.
<button> — Кнопка: отправляет форму или запускает действие.

Вопросы и ответы по теме

Как сделать кнопку или ссылку неактивной

В учебнике

Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.

Спасибо, что читаете!