When an HTML form control element is disabled that means it can’t be selected, clicked on, typed into nor does accept focus anymore. Also, by default, browsers display such form controls grayed out.
In this article, you’ll find out how to use the HTML
- The HTML
- Toggle the
disabledstate with JS
- Style the
disabled boolean attribute
In this article we’ll be focusing on the basic HTML elements only, so here’s a checkbox input which has a
Note that setting a value for the
disabled attribute is not really required, due to its boolean logic. Therefore, considering the presence of a boolean attribute on an element, all the below values are redundant and the outcome is a
disabled behavior anyway:
fieldset element is used to group several controls within a web form. If the boolean
disabled attribute is set on the
fieldset, then all the form controls contained within will become disabled too.
Here’s an example with both of the form controls being disabled due to being wrapped by a disabled
Comparing to the
readonly form controls, the
disabled ones are not submitted within a form, therefore they are also ignored when it comes to
form validation. Also, the
disabled form controls are not focusable either.
If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
When using an HTML element, such as a form control, which natively supports the
disabled boolean attribute, you don’t need the
Steve Faulkner wrote a good piece on the disabled/aria-disabled attributes so you should go check it out!
disabled state with JS
You can take advantage of the fact that the
.disabled property returns a boolean value so you can toggle it easily using the following:
Also, besides the classic
setAttribute() methods, you can use the
toggleAttribute() method to toggle the
disabled attribute or any other boolean attribute. Although the browser support is not perfect, this might come in handy:
pointer-events: none on all the
With better browser support for the
:matches(), as @SelenIT2 pointed out) CSS pseudo-class, here’s how we could write a bulletproof CSS rule, to prevent interaction and event issues on the disabled form controls:
fieldset element is excluded in the above rule in order to avoid breaking other elements or
title attributes wrapped within it.
disabled form controls
There are two ways to select a disabled element using CSS:
[disabled]attribute selector can be used for any HTML element user that has a
disabledattribute, and it doesn’t really have to be a form control element.
:disabledpseudo-class, introduced in Selectors Level 3, is the preferred method to select a disabled element, due to the fact it matches HTML elements that support the
Links are not
spans or whatever. Still, an
a element can act as a placeholder link when it’s used without its
aelement has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed.
We know that the
:disabled CSS pseudo-class only applies to form controls that natively support a
disabled attribute and the
a element is not among them.
Therefore, the following CSS rule contains both the
[disabled] attribute selector and the
.disabled class selector. You know, just in case you want, need, or have to use
<a disabled>...</a> instead of
<a class="disabled">...</a> in a certain situation.
If you’re wondering why would you even disable link elements, there is a scenario I’m having in mind and I’m sure you also did stumble upon this before:
Let’s say you have an active item within a navigation, showing it’s the active URL in that navigation. Now, besides the active styles applied to it, you might also want to prevent the user clicking and refreshing that already active page he’s on.
Default User Agent
In case you’re wondering where all those default disabled styles come from, here’s a list with the most popular User Agent styles, feel free to dive in:
- The IE 11 and below don’t fully support the boolean
disabledattribute on a
- When adding the CSS
pointer-events: nonedeclaration to a link, in an attempt to disable it, you should also think of applying
tabindex="-1"in order to take it out of the tab order.
- There is no good reason to use the CSS
[disabled]attribute selector in favor of the
:disabledpseudo-class. Perhaps needing IE6 - IE8 support and that’s definitely not a good reason.
- Comparing to the boolean
aria-disabled, when set as an attribute, does require a value of either
aria-disabled="false"is set on a form control along with the
disabledattribute, then the latter has greater specificity and the
aria-disabledattribute gets ignored.