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:
<!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.2
- Google Chrome 4.0
- Firefox 3.5
- Opera 9.6
- Internet Explorer 9.0
More Selectors: