:enabled
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The:enabledCSSpseudo-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.
Try it
label { display: block; margin-top: 1em;}*:enabled { background-color: gold;}<form> <label for="name">Name:</label> <input name="name" type="text" /> <label for="emp">Employed:</label> <select name="emp" disabled> <option>No</option> <option>Yes</option> </select> <label for="empDate">Employment Date:</label> <input name="empDate" type="date" disabled /> <label for="resume">Resume:</label> <input name="resume" type="file" /></form>Syntax
css
: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
html
<form action="url_of_form"> <label for="FirstField">First field (enabled):</label> <input type="text" value="Lorem" /><br /> <label for="SecondField">Second field (disabled):</label> <input type="text" value="Ipsum" disabled /><br /> <input type="button" value="Submit" /></form>CSS
css
input:enabled { color: #22bb22;}input:disabled { color: #aaaaaa;}Result
Specifications
| Specification |
|---|
| HTML # selector-enabled |
| Selectors Level 4 # enabled-pseudo |