:disabled
Matches disabled form elements, meaning ones that can’t be clicked, checked, or edited.
Example
#.btn {
background: #7c3aed;
transition: opacity 0.2s;
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}<form class="stage" style="display: grid; gap: 10px; justify-items: start;">
<label style="display: flex; align-items: center; gap: 8px;">
<input type="checkbox" onchange="this.form.elements.send.disabled = !this.checked">
I accept the terms
</label>
<button class="btn" name="send" type="button" disabled style="padding: 8px 16px; border: 0; border-radius: 8px; color: #fff; font: inherit;">Sign up for the course</button>
</form>Check the box. The script removes the disabled attribute from the button, and the CSS immediately stops graying it out.
Definition and usage
#The :disabled pseudo-class selects controls with the disabled attribute: buttons, input fields, select lists, textarea fields, as well as option, optgroup, and fieldset. A disabled element doesn’t respond to clicks, doesn’t receive focus, and isn’t submitted with the form.
Disabling also passes through <fieldset disabled>: every control inside then matches :disabled, except those in the first legend. The opposite of :disabled is :enabled, which matches active controls.
Browsers gray out disabled controls by default, but with a custom look you have to handle that yourself. The typical combo is reduced opacity and a not-allowed cursor. Keep in mind that :disabled doesn’t work for links or for elements marked only with aria-disabled="true"; for those, use an attribute selector.
Syntax
#selector:disabled { property: value; }Common uses
#- Disabled controls are dimmed, and the cursor over them shows a ban sign. Hover to check.
- A hover effect only for active buttons, thanks to the opposite pseudo-class
:enabled. The disabled one doesn’t react. - A dashed border and dimmed text make it clear right away that a disabled field can’t be edited.
Common uses in practice
#:disabled
:disabled { opacity: 0.45; cursor: not-allowed; }input:disabled
input:disabled { border-style: dashed; color: #71717a; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- A disabled button doesn’t say why it’s disabled. Add a short hint next to it, or leave the button enabled and show a message after the click.
- Don’t overdo the transparency: a control should look inactive, but its text still has to be readable.
- You can disable a whole form section with a single attribute on
<fieldset disabled>. Every field inside immediately matches:disabled.
Related entries
#- :checkedMatches a checked checkbox, a selected radio button, and a selected option in a select list.
- :invalidMatches form fields whose value breaks an HTML validation rule, such as an empty required field or a malformed email address.
- :not()Selects elements that match neither the given selector nor any selector in the list.
Spotted a mistake or missing an example? Write to us.