CSS :disabled Selector
Last Updated : 29 Aug, 2024
Improve
The: disabled selector is used to select the disabled element. This property is mostly used on the form elements.
Syntax:
:disabled {
// CSS property
}
You can also Set a background color for all disabled input elements of type="text":
input[type=text]:disabled {
background: #dddddd;
}
Example 1: Here is the example of the above-explained selector.
<!DOCTYPE html>
<html>
<head>
<title>disable property</title>
<style>
h1 {
color: green;
}
input[type=text]:enabled {
background: green;
}
input[type=text]:disabled {
background: white;
}
input {
width: 150px;
padding-left: 10px;
margin-top: 10px;
border: 1px solid black;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:disabled Selector</h2>
<form action="">
Author Name:
<input type="text"
value="Geeks"><br>
College Name:
<input type="text"
value="GFG"><br>
Country:
<input type="text"
disabled="disabled"
value="India">
</form>
</body>
</html>
Output: 
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>disable selector</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>:disabled Selector</h2>
<select>
<option value="s1">Data Structure</option>
<option value="s2" disabled>Algorithm</option>
<option value="s3">Operating System</option>
<option value="s4" disabled>HTML</option>
<option value="s5">C programming</option>
</select>
</body>
</html>
Output: 
Supported Browsers: The browser supported by :disabled selector are listed below:
- Apple Safari 3.1 and above
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Firefox 1.0 and above
- Opera 9.0 and above
More Selectors:
