Form Field Backgrounds

I was using this code to highlight the form fields (the colors are not right but not the real issue):
<input type="text" name="sample" onfocus="this.style.backgroundColor='#FFF380'" onblur="this.style.backgroundColor='#ff0000'" />

Open in new window

I had noticed though that when I go to the next form field, the background color still had the highlighted color.

I was completing another form, and that company had the form fields highlighted when I was in that form.  I took a look at their style sheet, and found;
#formbox input:focus {background: #efeff7;}

Open in new window


I looked on IE9, Firefox 3.6, and Opera 11.1 to start off with - and it seems this code has the behavior that I am looking for.

Basically, I am just looking for expert(s) to confirm (or deny) this is better / works well in the browsers, etc.

Thanks!
LVL 29
coreybryantAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
McOzConnect With a Mentor Commented:
Yes these are called CSS "psuedo-classes" and are defninitely the way to go. Others include :hover, :active, etc.

Cheers
0
 
imantasConnect With a Mentor Commented:
McOz is right, but please note that older versions of IE have many problems related to pseudo-classes.
0
 
coreybryantAuthor Commented:
Thanks!  That is what I thought, but just wanted to make sure.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.