CSS Disabled Selector
In this article, we will see CSS disabled selector and how to use it.
Syntax of disabled selector
selector:disabled
{
declaration list;
}
It selects any HTML element targeted by the selector, if it status is disabled.
Ex:
input:disabled
{
background-color:black; }
It selects any input element if its status is disabled.
Example code
CSS:
input:disabled{
background-color:yellow;
}
HTML:
<form name="login" action="processor.html">
Username: <input disabled="disabled" > Click Here</input>
Email: <input type="text" name="email"><br><br>
Password: <input disabled="disabled" type="text" name="pass">
</form>
Output:
- In the above code, we have created <form> tag within that we have some <input> tag to retrieve information from the user.
- Then in CSS, we selected the “input” tag using the CSS element selector. And then we use the “disabled” pseudo-class selector, which is used to apply styles to all input tags except which input has the disabled attribute.
- See the above output, the yellow background is set to all input boxes except the first input box, because it has “disabled” attribute.
- Remember that: The disabled selector selects all the elements except which elements have “disabled” attribute. Enabled selector selects only which have “disabled” attribute