Labels with hover events

The label tag is often overlooked as a tool for improving form usability. The tag is useful because it allows your user to click the label text to change their focus to the input element, rather than forcing them to click the input form element itself. Checkboxes and radio-buttons are difficult enough to click by most users. People who have fine motor control difficulties may find such a task impossible.

In order to emphasize the fact that the user can click the form element label, you can attach a style to the background of the label using the dynamic pseudo-class known as 'hover'. Nothing screams, "Click me," louder than a colourful background change.

Sample CSS


label {
	font-weight:bold;
	background-color:#FFFFFF;
}
label:hover {
	background-color:#99FF99;
}

Sample HTML


<label for="Name">Your name</label><input name="fmName" type="text" id="Name" tabindex="100" title="Your Name" size="55" />

Sample Form



Subscribe to these email alerts



Valid XHTML 1.0 Transitional