HTML and CSS Reference
In-Depth Information
<body>
<p class="annoy">
Roll over me.
</p>
<p>
Now
<span class="annoy">
roll over
</span>
that bit of text.
</p>
<form action="#">
<div><input type="text" size="40" value="Hover and then click into this
field"></div>
</form>
</body>
</html>
O
NLINE
http://htmlref.com/ch4/hoverfocus.html
Interface State Pseudo-Classes
User interface elements such as forms have various states depending on user activity. CSS3
introduces pseudo-classes to style form elements depending on state. For example,
:enabled
and
:disabled
are used to specify the style for elements that have been enabled
or disabled, respectively, generally by whether the (X)HTML attribute
disabled
has been
set. For example, the rule
input[type=text]:enabled {background-color: yellow;}
would apply a yellow background to the text field here
<input type="text" size="40" value="This field is enabled"><br>
while this rule
input[type=text]:disabled {background-color: red;}
would apply to a red background to a disabled field like
<input type="text" disabled size="40" value="This field is disabled">
It should be noted that very often the disabling or enabling of fields will not be directly
present in markup, but may be set by JavaScript.
The style of check boxes and radio buttons can be controlled using the
:checked
pseudo-property. For example,
input[type=checkbox]:checked {border: 2px solid red;}
would put a special border on the check box once it was set.
Other user-interface selectors are also defined under an emerging CSS3 UI specification,
3
like
:default
,
:valid
,
:invalid
,
:in-range
,
:out-of-range
,
:required
,
:optional
,
:read-only
, and
:read-write
. The meaning of some of these should be clear; for example,
input[type=text]:readonly {border: 2px dashed red;}
3
www.w3.org/TR/css3-ui/#pseudo-classes
