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.