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

Date: 09/30/2004 :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+.

1) Name:

2) Email address:

3) Comments:


<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>

The CSS:

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

Comments (14)

Funny, lol You said read the page before posting, but you should read posts before commenting:

(as of IE 6.0) is what it says, and Joey was commenting about IE7.

#1: mikemike on 12/10 at 05:24 PM

mmm nice

#2: poojew on 01/29 at 10:01 AM

css textboxt input (textfield) style - examples - -

#3: chester on 05/24 at 01:55 PM

The input:focus highlighting stuff is really cool!

#4: nOOn on 06/26 at 03:26 PM
Commenting is not available in this weblog entry.

Partners & ResourcesOur

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

Website Load Testing services

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site