Solved

Form Field Backgrounds

Posted on 2011-03-14
3
276 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
3 Comments
 
LVL 9

Accepted Solution

by:
McOz earned 400 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 100 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Bootstrap css to change alignment without using padding 3 49
get multiple images to align right 5 42
.php tree directory? 5 55
Objects on Same Line 2 18
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

912 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now