CSS Examples :focus pseudo class (highlight form element onFocus)

Author: CSS Drive

The ":focus" CSS puesdo class applies the style to an element when the user sets focus on it. Using it, for example, you can easily highlight the form element the user is currently typing in. Note that ":focus" is currently not supported in Internet Explorer (as of IE 6.0), but is in Mozilla/ NS7+.

The HTML:

<form>
<p>1) Name:<br />
<input type="text" size="40"></p>

<p>2) Email address:<br />
<input type="text" size="40"></p>

<p>3) Comments:<br />
<textarea rows="5" name="comments" cols="45" wrap="virtual"></textarea></p>

<p><input id="actualsubmit" type="submit" value="Submit"></p>
</form>

The CSS:

input:focus, textarea:focus{
background-color: lightyellow;
}

Comments (14)