:disabled are pseudo classes that allow the styling of different states of form inputs, ones that are clickable or can have text entered into them (enabled) or those that can’t (disabled).
All form controls are enabled by default but can be disabled by adding the
:disabled are supported in IE9+
There’s a number of pseudo classes in CSS.
These pseudo classes help us style different states and target specific elements based on their relationship or position to other elements.
:disabled pseudo classes style form elements that can or cannot be filled in or selected.
An enabled element is one that can be clicked, selected, receive focus or accept text input – a disabled element is one that cannot.
Elements are enabled by default but can be disabled using the
disabled attribute in HTML.
Enabled / Disabled form fields
The user agent provides some default styling for disabled elements. Let’s take a look
I’ve got two sets of inputs and buttons here.
They are both in their default state of enabled which we can demonstrate by styling them with the
:enabled pseudo class, giving them a dark grey background and a blue text color.
If I now add the
disabled attribute to the HTML of the first set of inputs, the user agent styles for disabled fields takes over and our
:enabled styles do not as the inputs are no longer enabled. We can control the styling of disabled inputs in CSS with the
:disabled pseudo class.
Let’s take a look at a real-world use case.
Here we have the payment step for ordering some food online. In this stage of the form, the payment method is requested and the choice is either cash or card.
When we change the payment method the script checks whether the radio button with the ID of cash is
:checked. This is another pseudo class that determines state – in this case, the checked or unchecked state of a checkbox or radio button. If cash is checked, we add the disabled attribute to all the inputs and select menus in the card fields container. We also add an
is-disabled class to the labels which will allow these to be given different styles too.
We can then style these in CSS, making the color of the text and the background of the inputs a light grey to show that they’re no longer enabled.
AtoZ CSS: Learn CSS and sharpen your front-end skills
AtoZ CSS is a video screencast series that tackles one CSS topic per letter of the alphabet. From auto to z-index, take a deep dive into a single property, value, selector or concept each week.