:enabled CSS Pseudo Class
Description
The :enabled pseudo-class in CSS is used to select HTML elements that are currently in an enabled or active state. An element is considered "enabled" when it can receive user input or interactions, such as clicking, typing, or submitting a form.
For example, you might use the :enabled pseudo-class to style a form button differently when it is active and can be clicked, as opposed to when it is disabled and cannot be interacted with.
Here's a simple CSS example that changes the background color of an enabled button:
button:enabled {
background-color: #3498db; /* Blue when enabled */
color: #fff; /* White text when enabled */
cursor: pointer; /* Change cursor to pointer when enabled */
}
This CSS rule will apply the specified styles to any
<button> element that is currently enabled for user interaction. When the button is disabled, these styles will not be applied, allowing you to provide visual feedback to users about the interactive state of elements on your web page.Syntax
:enabled {
/* ... */
}
Example
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname" disabled>
<br><br>
<input type="submit" value="Submit">
</form>input[type=text]:enabled {
border: 2px solid green;
background: yellow;
}Browser Support
The following table will show you the current browser support for the CSS :enabled pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 1 | 1 | 9 | 3.1 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 2 | 1 | 2 |
Last updated by CSSPortal on: 1st October 2023