: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
Edge Chrome Firefox Opera Safari
121193.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1212

Last updated by CSSPortal on: 1st October 2023