Css3:enabled with: Disabled pseudo class selector

Css:enabled and: Disabled pseudo class selector

In Web Forms, some form elements (such as input boxes, password boxes, check boxes, and so on) have 2 states of "Available" and "unavailable." By default, these form elements are in the available state.

In CSS3, we can use the: Enabled selector and the: Disabled selector to set CSS styles for both the available and unavailable states of the form element, respectively.

Grammar:

:disabled {    style properties }:enabled { style properties }

For example, we add an outline line outline to the text box for the "available" state, and then change the background color for the text box "disabled". The CSS code is as follows:

input[type="text"]:enabled{    outline:1px solid #63E3FF;}input[type="text"]:disabled{ background-color:#FFD572;}

Css3:enabled and: Disabled instances

1.css3:enabled instances

Sets the background color of all input elements available type= "text":

<! DOCTYPE html>input[type= "text"]:enabled{            background:slateblue;        }            </style>
Effect:
　
 
2.css:d isabled Instances
Sets the background color of all input elements that are not available type= "text":
<! DOCTYPE html>  input[type= "text"]:d isabled{            background: #dddddd;        }    </style>
Effect:
 
Css3:enabled with: Disabled pseudo class selector