StylizedWeb is a web design trends and tutorials blog, maintained by Ross Johnson who also runs a web design company and design blog.

Categories Archive

Popular Posts
Advertisement
Premium WordPress Themes, Theme Galaxy Basecamp
Najbolje ponuda IT poslova u Srbiji na itposlovi.info Advertise on Stylized Web

Yellow fields in web form

add to Save to Delicious Save to Stumble Save to Digg

You must have seen that annoying Firefox option for changing your fields background color in your beautiful contact, order, comments form. Yes you are right, it’s everywhere mostly for Email, Name and some other form fields. Even if you set background color it will change it, and that’s for focus state too. I have a solution that I’m using for a while, it’s not really elegant one, it requires images, but it works just fine.

Yellow bg

 
input, textarea {
background:#fff;
color:#333;
background:url(images/blank1.gif) repeat;
}
 
textarea:focus, input:focus {
background:#333;
color:#fff;
background:url(images/blank2.gif) repeat;
}
 

I'm using this same thing on this website. So you see, just add some small 1x1px image for these two states (for hover you don't have to, just add color, if you want solid background of course). I'm my case blank1.gif is white image and blank2.gif is dark gray image #333.

NOTE: If you are using dark focus on light background, you'll probably change text color too, like on this site. But be careful because IE just doesn't apply this focus option, and if you for example change focus text color to white readers won't see the text. So you could include this code in your header, so it won't change your color if IE

 
<!--[if IE 6]>
<style>
textarea, input {
color:#333;
}
</style>
 
<![endif]-->
 
Input focus IE fix

Or you could use great fix for this from HTML Dog just include this small JavaScript in your header for input and textarea and add input.sffocus and textarea.sffocus to existing code

 
<script type="text/javascript" src="inputfix.js"></script>
 
...
 
textarea:focus, textarea.sffocus, input:focus, input.sffocus {
background:#333;
border:1px solid #111;
color:#fff;
background:url(images/blank2.gif) repeat;
}
 

Have some feedback? Leave a comment



What do you think?





28 Responses so far

By Dejan Cancarevic
on July 8, 2008

Very nice one Jonathan, thanks!

By Jonathan Davidson
on July 8, 2008

Here is an easier method: define the color in your css style sheet and use the ‘!important’ rule. This will override Google toolbar and uses no javascript.

Example:

input { background-color:#FFFFFF !important; }

By Best Insurance Quotes Online
on June 16, 2008

nice blog

By Giridhar
on April 22, 2008

Nice solution. Was really helpful

By the_cool_guy
on April 6, 2008

this is the coolest place ever! After visiting all kinds of sites, I figured out that this one is the most interesting

By Sai
on March 13, 2008

That was a nice post. However you should display the example result not only picture.

By guest
on February 24, 2008

This is just going back to the days of “Must be viewed in browser …”

Instead what you are doing is “Must be viewed with Google toolbar disabled..”

I dont like the feature, but the users who do like and use it will just assume theres something wrong with your site if you deliberately break the functionality they are used to everywhere else.

By george
on February 22, 2008

I was told that the yellowing of certin input fields was due to the Google autofill feature. Fields with names or labels that are associated with personal contact information show up yellow, whereas other fields do not. At least in IE.

I do not like the idea of Google having more access to a web page than it’s designer does. Renaming these fields would have the effect of keeping Google out - but some of your users might like the Google autofill option.

With Google Autofill, you put your contact info in, and every time you happen upon a page with thoes fields, they will be filled in for you. Great for lazy typers and spammers.

By tray
on February 18, 2008

wow. awesome. a client was just asking about this and i hadn’t heard of this hack before. thanks :-)

By Doodee
on February 3, 2008

Thanks for sharing

By Dejan
on January 19, 2008

@ David
Try to be helpful, not hurtful. I don’t think anyone cares about your personal taste, and don’t judge else’s taste.
This is working solution how to avoid yellow color and not to uninstall tool bar because i have installed it with a reason and like most of these people i need it.

So it’s very stupid think to say, and also this “And stop using IE”, you can’t tell buyer to stop using something or to uninstall tool bar.

By David
on January 19, 2008

First, don’t recolor your text boxes. It rather pisses me off. I can tell quite well what text box has focus… how, you ask? hm… the CURSOR is blinking!! Brilliant, isn’t it? Second, this has to be at least the third blog I’ve found of somebody claiming to have solved the “yellow text box of doom” problem. Please. Uninstall Google Toolbar. For the rest of our sanities. And stop using IE. It sucks. Hard.

By Dejan
on January 18, 2008

@ Phil Taylor
This is great, i wondered why so many people don’t know about this and still they have FF. Uninstall it is quick yes but it’s necessary to me

By Phil Taylor
on January 18, 2008

I wonder why people don’t realize the real issue is actually the Google Toolbar for Firefox changes these fields to yellow because you can pre-fill them with saved data using the toolbar icon on the Google Toolbar!

To fix the yellow backgrounds, just uninstall the Google Toolbar!

Easy eh?

By Dejan
on January 8, 2008

@ john
Great, thanks for clearing what is it finally!
And thanks for another solution, but in that case as you said we won’t have autofill option within our browser, and i really hate to type my information over again ;)

By john
on January 8, 2008

The yellow highlight, is for the form autofill option within your browser. The highlighted input boxes are field names the browser recognizes from previously filled out forms.

The easy option to trick the browser is to use different names for the inputs when coding the form.

So just use a different name for the input and you will not get the highlights.

By Steph
on January 7, 2008

I was actually curious why Firefox does that to begin with? Are you sure not an accessibility reason?

By Jermayn Parker
on January 7, 2008

Nice idea!
This issue surely is a pain at times.

By Dejan
on January 6, 2008

@ Dennison Uy - Graphic Designer
It’s on every single website, even yours http://blog.codesignstudios.com/
I’m using FF 2 and it’s showing yellow bg for name and email field and even in your search form

And please don’t mix if someone wants gradient or some image for bg, this is just to avoid FF automatic changing of your form

By Dennison Uy
on January 6, 2008

Where can I find this Firefox option that you are referring to? I couldn’t find it. If such an option really exists, I think that forcing the browser to display as such breaks accessibility, but then again so many websites already set display images for field backgrounds (even Microsoft’s own websites do this).

By Armen
on January 6, 2008

Totally awesome!

I was trying to find a solution to this issue a few days ago, and found nothing. Thank you so much!

Did I tell you this is awesome?

By Majda
on January 2, 2008

cOol… ;)

  1. Sep 2, 2008: 10 Great CSS Hacks « Thatgrafix Blog
  2. Jun 3, 2008: seo toolbar
  3. May 31, 2008: Webpage Templates Design Your Own Kitchen Kitchen Island Design
  4. May 29, 2008: Beats Programming Timbaland Style Javascript Tutorial J2ee
  5. Apr 18, 2008: 10 best CSS hacks
  6. Mar 7, 2008: Thatgrafix Web Design Portland Oregon