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: disabled Selector
The CSS :disabled selector is used to style form elements that have the disabled attribute. This pseudo-class selector targets input fields, buttons, and other form controls that are disabled and cannot be interacted with by users.
Syntax
:disabled {
/* CSS properties */
}
element:disabled {
/* CSS properties */
}
Example
The following example demonstrates how to style enabled and disabled input fields with different background colors −
<!DOCTYPE html>
<html>
<head>
<style>
input:enabled {
background: lightblue;
border: 2px solid blue;
padding: 8px;
margin: 5px;
}
input:disabled {
background: lightgray;
border: 2px solid gray;
padding: 8px;
margin: 5px;
cursor: not-allowed;
}
label {
display: inline-block;
width: 80px;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<label>Subject:</label>
<input type="text" name="subject" placeholder="Enter subject"><br>
<label>Student:</label>
<input type="text" name="student" placeholder="Enter name"><br>
<label>Age:</label>
<input type="number" name="age" placeholder="Auto-filled" disabled><br>
<label>Submit:</label>
<input type="submit" value="Submit Form">
</form>
</body>
</html>
A form with three input fields appears. The Subject and Student fields have light blue backgrounds and can be typed in. The Age field has a gray background with a "not-allowed" cursor, indicating it's disabled and cannot be edited.
Key Points
- The
:disabledselector only applies to form elements with thedisabledattribute - Disabled elements cannot receive focus or user interaction
- Common styling includes grayed-out appearance and "not-allowed" cursor
- Works with input, button, select, textarea, and other form controls
Conclusion
The :disabled selector provides an effective way to visually distinguish disabled form elements from active ones. Combined with the :enabled selector, it helps create clear user interfaces that indicate which fields are interactive.
Updated on: 2026-03-15T12:18:06+05:30
267 Views
Advertisements