codescracker


css

CSS3 User Interface (UI) Element States Pseudo-Class



« Previous Tutorial Next Tutorial »


UI Element States Pseudo-Classes

The UI element states pseudo-classes enables you to specify the appearance of UI elements, such as buttons and check boxes. Using these classes, you can add a particular style to an enabled or disabled button or checked or unchecked check box.

User Interface Element States Pseudo-Classes

The following table describes the UI element states pseudo-classes available in CSS3 :

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

CSS3 User Interface States Pseudo-Classes Example

Some examples of using the UI element states pseudo-classes are given as follows :

input[type="text"]:enabled {
background-color: red; }

input[type="text"]:disabled {
background-color: blue; }

input:checked {
border: 1px solid pink;}

In the preceding examples, the background color of an enabled text box is set as red and of a disabled text box is set as blue. In addition, a check box is displayed in pink border if it is in the selected static.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test