CSS :enabled, :disabled, :checked, :indeterminate

The User Interface (UI) element state pseudo-classes enables you to specify the appearance of UI elements, such as buttons and check boxes.

Using User Interface (UI) element states pseudo-classes, you can add particular style to an enabled or disabled button, checked or unchecked check box.

User Interface Element State Pseudo-Classes

The following table describes the UI element state pseudo-classes available in CSS :

Pseudo-Class	Description
:enabled	Represents an element of UI that is in the enabled state, for instance a menu option. Note that such elements also have a corresponding disabled state.
:disabled	Represents an element of UI that is in the disabled state, for instance a menu option. Note that such elements also have a corresponding enabled state.
:checked	Represents the selected states of radio and checkbox elements.
:indeterminate	Represents the undetermined states of radio and checkbox elements. Sometimes these elements are neither checked nor unchecked, because of an element attribute, or Document Object Model (DOM) manipulation

CSS :enabled, :disabled, :checked, :indeterminate Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      input[type=text]:enabled {background-color: hotpink; color: ivory;}
      input[type=text]:disabled {background-color: gray;}
      input:checked {width: 50px; height: 20px;}
      input:indeterminate {width:70px; height: 30px;}
   </style>
</head>
<body>

   <form>
      Username: <input type="text" name="user"><br/>
      Email ID: <input type="text" name="email" disabled="disabled"><br/>
      Password: <input type="password" name="pass"><br/><br/><br/>
      Gender: <input type="radio" name="gender" value="male">Male<br/>
            <input type="radio" name="gender" value="female">Female<br/><br/><br/>
      Skills: <input type="checkbox" name="skill" value="python">Python<br/>
            <input type="checkbox" name="skill" value="java">Java<br/>
            <input type="checkbox" name="skill" value="cpp">C++<br/>
            <input type="checkbox" name="skill" value="js">JavaScript<br/>
   </form>
   
</body>
</html>

Output

CSS Online Test

« Previous Tutorial Next Tutorial »