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. The :enabled and :disabled pseudo-classes style form elements that can or cannot be filled in or selected.
The :enabled pseudo-class can be used to style the enabled state of form elements such as button, input, optgroup, option, select and textarea elements. Elements that can have an :enabled state also have a corresponding :disabled state.
These states are set by the boolean disabled attribute. It’s important to note that there isn’t an “enabled” attribute even though there is an :enabled pseudo-class.
<input type="text"/>
<input type="text" disabled/>Therefore, these elements can be styled either by their pseudo-class, with an attribute selector or with a negated attribute selector:
input:enabled { }
input:not([disabled]) { }
input:disabled { }
input[disabled] { }There’s no real difference between using any of these; and they all have the same specificity.
When to use :enabled and :disabled
Let’s take a look at a real-world use case. Imagine we are building a 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.
If we want to pay by card, the fields for the card holder, card number, start date, expiry date and security code are enabled. If we want to pay with cash, these details aren’t needed, and we can disable them. This can’t be done with CSS alone, but we can use a bit of JavaScript to handle the interaction.
input:enabled {
...
color: blue;
border: 1px solid blue;
}
input:disabled {
...
color: lightgray;
border: 1px solid gray;
}
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.
Guy RoutledgeFront-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.
