🔥 Get a free month of Premium Access. Use code: FREEAUG at checkout

AtoZ CSS Quick Tip: How to Style with the Enabled Pseudo-Class

Guy Routledge

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
View the full screencast and transcript for the :enabled pseudo-class here.

Welcome to our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) beginning with a letter from the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the :enabled value for you.


E is for :enabled

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; they’re all supported in IE9+, and they all have the same specificity.

I’m not sure how often using these selectors will come up, but it’s interesting to look at all the different ways of approaching the same problem.