The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Pseudo-classes and Pseudo-elements 43

UI Element States

Elements relating to forms and user input can have various states; they can

be disabled or checked, for example, by setting attribute values:

<textarea disabled="disabled"></textarea>

<input checked="checked" type="checkbox">

CSS3 has three UI state pseudo-class selectors, which allow you to apply

rules to elements based on their current state:

:checked {...}

:disabled {...}

:enabled {...}

noTe HTML has no enabled attribute; elements that are not disabled are, by definition,
enabled.

To see the effect of these pseudo-class selectors, consider the following

style rules:

input[type='text']:disabled { border: 1px dotted gray; }

input[type='text']:enabled { border: 1px solid black; }

I’ll apply these rules to a form that has two text input elements, one of

which has a disabled attribute (the form isn’t well-structured as I don’t have

labels for the inputs, but I’ve left them out for clarity):

<form action="">

<fieldset>

<legend>UI element state pseudo-classes</legend>

<input type="text" value="Lorem ipsum" disabled>

<input type="text" value="Lorem ipsum">

</fieldset>

</form>

You can see the results in Figure 4-8.

Figure 4-8: Disabled and enabled element states

As you can see, the disabled form element has grayed-out text (which is

done automatically by the browser) and a gray dotted border (which I set in

the style sheet). I set a solid black border around the enabled element.