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:

1. In the above code, we have created <form> tag within that we have some <input> tag to retrieve information from the user.
2. 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.
3. See the above output, the yellow background is set to all input boxes except the first input box, because it has “disabled” attribute.
4. Remember that: The disabled selector selects all the elements except which elements have “disabled” attribute. Enabled selector selects only which have “disabled” attribute