CSS :enabled Pseudo Class
Use the :enabled CSS pseudo-class for selecting and styling the enabled elements. Read about the pseudo-class & practice with examples.
The CSS :enabled pseudo-class matches any form element that is currently enabled — meaning it can be activated (clicked, typed into, or focused) and can receive user input. It is the direct counterpart of :disabled.
An element is "enabled" when it is the kind of element that supports a disabled state and does not have the disabled attribute set. This page covers when :enabled applies, the elements it affects, common gotchas, and two practical examples.
Which elements can be enabled
:enabled only targets elements that are actually able to be disabled. These are the interactive form controls:
<button><input>(all types)<select><textarea><option><optgroup><fieldset>
A <div>, <p>, or link can never be "enabled" or "disabled" in this sense, so :enabled will never match them — even though they are interactive.
Why use it
By default an enabled control already looks active, so you rarely need :enabled on its own. It becomes useful when you want a clear visual contrast between usable and unusable controls — for example, brightening fields a user can fill while :disabled greys out the ones they cannot. Pairing the two pseudo-classes keeps a form's interactivity obvious at a glance.
Things to watch out for
- Default state. Because controls are enabled by default,
:enabledmatches them unless you explicitly add thedisabledattribute. Settingdisabledin HTML or via JavaScript (element.disabled = true) flips an element from:enabledto:disabled. <fieldset disabled>cascades. Disabling a<fieldset>disables every control inside it, so those children stop matching:enabledeven without their owndisabledattribute.- Read-only is not disabled. A
<input readonly>is still enabled — it matches:enabled, not:disabled. Use:read-onlyfor read-only styling.
Version
Syntax
CSS :enabled syntax example
:enabled {
css declarations;
}Example of the :enabled selector:
CSS :enabled code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 2px 5px;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #ccc;
}
</style>
</head>
<body>
<h2>:enabled selector example</h2>
<form action="#">
<label for="name">First name:</label>
<input type="text" value="John" id="name" />
<br />
<label for="lastname">Last name:</label>
<input type="text" value="Smith" id="lastname" />
<br />
<label for="country">Country:</label>
<input type="text" disabled="disabled" value="10 High Street" id="country" />
</form>
</body>
</html>Example of the :enabled selector with the <option> tag:
CSS :enabled another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
option:enabled {
background: #d4f7d4;
color: #064;
}
option:disabled {
background: #f0f0f0;
color: #aaa;
}
</style>
</head>
<body>
<h2>:enabled selector example</h2>
<select>
<option value="paris">Paris</option>
<option value="london" disabled>London</option>
<option value="moscow">Moscow</option>
<option value="rome" disabled>Rome</option>
<option value="berlin">Berlin</option>
</select>
</body>
</html>Note that browsers limit how much of a <select> and its <option> elements can be restyled, so the exact rendering of these colors varies between browsers and operating systems.
Browser support
The :enabled pseudo-class is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge.
Related pseudo-classes
:disabled— the opposite of:enabled; matches controls that cannot be used.:read-only— matches controls the user cannot edit (note: still:enabled).:checked— matches selected checkboxes, radio buttons, and options.:required— matches form controls that must be filled in.:focus— matches the control that currently has keyboard focus.