Home

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:

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)

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 10:24 AM

mmm nice

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

css textboxt input (textfield) style - examples - -
http://www.css-lessons.ucoz.com/textbox-css-examples.htm

#3: chester on 05/24 at 07:55 AM

The input:focus highlighting stuff is really cool!
Thanks.

#4: nOOn on 06/26 at 09:26 AM

NewsUser
Privileges

Partners & ResourcesOur
Partners

CSS Forums News

Dynamic Drive forums | Register

All images and content copyright © 2004-2012 CSS Drive. Contact Info | Back to Top