The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus.

/* Selects any enabled <input> */ input:enabled {   color: blue; } 

:enabled

The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus.

/* Selects any enabled <input> */ input:enabled {   color: blue; } 

Syntax

:enabled

Examples

The following example makes the color of text and button <input>s green when enabled, and gray when disabled. This helps the user understand which elements can be interacted with.

HTML

<form action="url_of_form">   <label for="FirstField">First field (enabled):</label>   <input type="text" id="FirstField" value="Lorem"><br>    <label for="SecondField">Second field (disabled):</label>   <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>    <input type="button" value="Submit"> </form> 

CSS

input:enabled {   color: #2b2; }  input:disabled {   color: #aaa; } 

Result

Specifications

Specification
HTML Standard # selector-enabled
Selectors Level 4 # enableddisabled

See also

:disabled

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language