<pre class="brush: css notranslate"><code><span class="token comment">/ Selects any enabled &lt;input&gt; /</span> <span class="token selector">input:enabled</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre>

: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

See also

Last modified: Aug 12, 2021, by MDN contributors