:disabled
Matches form elements with the `disabled` attribute; `:enabled` matches the active ones.
Syntax
selector:disabled { … }Examples
A disabled button looks inactive:
<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>Notes
Keep enough contrast on disabled elements so the text can still be read. A disabled field is not sent with the form; if you only need to prevent editing, use readonly and :read-only.
See also
Related recipes
In the tutorial
- Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.