Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Role of CSS :enabled Selector
The CSS :enabled selector is a pseudo-class used to style form elements that are enabled and can be interacted with by users. This selector targets input fields, buttons, and other form controls that are not disabled.
Syntax
:enabled {
/* CSS properties */
}
/* Or target specific elements */
input:enabled {
/* CSS properties */
}
Example: Styling Enabled Input Fields
The following example demonstrates how to style enabled input fields with a blue background while disabled fields remain unaffected −
<!DOCTYPE html>
<html>
<head>
<style>
input:enabled {
background: lightblue;
border: 2px solid blue;
padding: 5px;
}
input:disabled {
background: lightgray;
border: 2px solid gray;
padding: 5px;
}
form {
max-width: 300px;
margin: 20px;
}
label {
display: block;
margin: 10px 0 5px 0;
}
</style>
</head>
<body>
<form>
<label>Subject:</label>
<input type="text" name="subject" placeholder="Enter subject">
<label>Student Name:</label>
<input type="text" name="student" placeholder="Enter student name">
<label>Age:</label>
<input type="number" name="age" placeholder="Enter age" disabled>
<label>Email:</label>
<input type="email" name="email" placeholder="Enter email">
</form>
</body>
</html>
A form appears with four input fields. The enabled fields (Subject, Student Name, and Email) have a light blue background with blue borders. The disabled Age field has a gray background with gray borders, showing the contrast between enabled and disabled states.
Conclusion
The :enabled selector is useful for creating visual distinctions between interactive and non-interactive form elements. It helps improve user experience by clearly indicating which fields can be modified.
Updated on: 2026-03-15T12:18:52+05:30
262 Views
Advertisements