[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Form Field Backgrounds

Posted on 2011-03-14
3
Medium Priority
?
281 Views
Last Modified: 2012-05-11
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!
0
Comment
Question by:coreybryant
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 9

Accepted Solution

by:
McOz earned 1600 total points
ID: 35130217
Yes these are called CSS "psuedo-classes" and are defninitely the way to go. Others include :hover, :active, etc.

Cheers
0
 
LVL 8

Assisted Solution

by:imantas
imantas earned 400 total points
ID: 35130283
McOz is right, but please note that older versions of IE have many problems related to pseudo-classes.
0
 
LVL 29

Author Closing Comment

by:coreybryant
ID: 35130768
Thanks!  That is what I thought, but just wanted to make sure.
0

Featured Post

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question