CSS Enabled Selector

In this article, we will see about the syntax for CSS enabled selector and how to use it. The enabled selector is one of the pseudo-class selector with respect to the user interface.

Syntax of an enabled selector

selector:enabled
{
declaration list;
}

It selects any UI HTML element targeted by the selector, if its status is enabled (default)

Ex:

input:enabled
{
background- color:blue;
}

It selects any UI input element if its status is enabled.

Example code

<html>
<head>
<style type="text/css">
input[type="text"]:enabled {
background: #ffff00;
}
</style>
</head>
<body>

<form name="login" action="processor.html">
Username: <input type="text" name="name"><br><br>
Email: <input type="text" name="email"><br><br>
Password: <input disabled="disabled" type="text" name="pass">
</form>

</body>
</html>

Output:

Steps:

In the above code, we have written the first basic HTML structure.
In the body section, we have created a form. I hope you guys have a basic idea about forms, if you do not have any idea about forms and forms controls, I suggest you people click the link and learn it.
Then we use the “name” attribute in the form and then give the value as “login”. And we use the “action” attribute and the given value as “processor.html”.
Inside the <form> tag, we create some <input> tags to retrieve information from the user.
In CSS, we select “input[type=”text”]” then we use “:enabled” pseudo-class selector here it selects All [type=”text”] are select except the input tag which uses a disabled attribute.
See the above output, all the input box is displayed in yellow except the password input box.