CSS :enabled

The CSS :enabled pseudo-class targets form elements that are in an enabled state. It is commonly used to style elements such as <input>, <textarea>, <button>, and <select> that can be interacted with by the user.

The syntax for the :enabled pseudo-class is:

</>
Copy
selector:enabled {
    property: value;
}

Where:

ParameterDescription
selectorThe form element (e.g., <input>, <textarea>) to which the :enabled pseudo-class will apply.
propertyThe CSS property to style the element.
valueThe value assigned to the CSS property.

Examples

1. Styling Enabled Input Fields

In this example, enabled <input> fields are styled with a blue border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:enabled {
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <form>
        <label>Enabled Field:</label>
        <input type="text" placeholder="Enabled"><br><br>
        <label>Disabled Field:</label>
        <input type="text" placeholder="Disabled" disabled>
    </form>
</body>
</html>

2. Styling Enabled Buttons

Here, enabled <button> elements are styled with a green background and white text.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        button:enabled {
            background-color: green;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button>Enabled Button</button>
    <button disabled>Disabled Button</button>
</body>
</html>

3. Styling Enabled Textareas

In this example, enabled <textarea> elements are styled with a lightblue background and a solid border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        textarea:enabled {
            background-color: lightblue;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <textarea placeholder="Enabled" rows="4" cols="30"></textarea><br><br>
    <textarea placeholder="Disabled" rows="4" cols="30" disabled></textarea>
</body>
</html>

4. Styling Enabled Select Dropdowns

Here, enabled <select> dropdowns are styled with a blue border and a white background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        select:enabled {
            border: 2px solid blue;
            background-color: white;
        }
    </style>
</head>
<body>
    <select>
        <option>Enabled Option</option>
        <option>Another Option</option>
    </select><br><br>
    <select disabled>
        <option>Disabled Dropdown</option>
    </select>
</body>
</html>

5. Styling Links That Are Enabled

In this example, enabled links are styled with blue text color and underlined text, while disabled links (using an HTML attribute) appear grayed out and unclickable.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:enabled {
            color: blue;
            text-decoration: underline;
        }

        a[disabled] {
            color: gray;
            pointer-events: none;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">Enabled Link</a><br><br>
    <a href="#" disabled>Disabled Link</a>
</body>
</html>