CSS :enabled Selector

Posted in CSS Tutorial

Updated on Sep 15, 2024

By Mari Selvan

👁️ 6 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The :enabled selector in CSS is used to select form elements that are currently enabled and can be interacted with. This pseudo-class is particularly useful for applying styles to form elements based on their state, enhancing user experience and accessibility.

💡 Syntax

The signature of the :enabled Selector is as follows:

Syntax

Copied

:enabled {
    /* CSS properties */
}

The :enabled pseudo-class can be used with any form control element that supports the enabled/disabled states, such as <input>, <button>, <select>, and <textarea>.

📝 Example

Here is an example of how to use the :enabled selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :enabled Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="Enter your name">
        <button type="submit">Submit</button>
        <input type="checkbox" id="agree">
        <label for="agree">I agree to the terms</label>
    </form>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for enabled elements */
:enabled {
    border: 2px solid green;
    background-color: #e0ffe0;
}

/* Style for disabled elements */
:disabled {
    border: 2px solid gray;
    background-color: #f5f5f5;
}

In this example:

Enabled form controls have a green border and a light green background.
Disabled form controls have a gray border and a light gray background.

💬 Usage Tips

The :enabled selector only targets elements that are enabled and can be interacted with. It does not apply to elements that are disabled.
Combine :enabled with other selectors to target specific elements within a form. For instance, you can style only enabled buttons using button:enabled.

⚠️ Common Pitfalls

Ensure that you use :enabled with form elements that support the disabled attribute. It won't have any effect on elements that don't.
Test across different browsers to ensure consistent styling, as some older browsers might not fully support all CSS pseudo-classes.

🎉 Conclusion

The :enabled selector is a powerful tool for enhancing the visual presentation of interactive form elements.

By leveraging this pseudo-class, you can provide clear visual feedback to users about which elements are active and can be interacted with. Using :enabled effectively contributes to a more intuitive and user-friendly web experience.