This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.
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 gray 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
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 gray to show that they’re no longer enabled.
Watch out for our Quick Tip article coming soon!
Front-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.