CSS | :disabled Selector
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:
html
<!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:
html
<!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:
Please Login to comment...