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.
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
cOol…
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?
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).
@ 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
Nice idea!
This issue surely is a pain at times.
I was actually curious why Firefox does that to begin with? Are you sure not an accessibility reason?
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.
@ 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
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?
@ 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
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.
@ 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.
Thanks for sharing
wow. awesome. a client was just asking about this and i hadn’t heard of this hack before. thanks
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.
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.
Pingback: Thatgrafix Web Design Portland Oregon
That was a nice post. However you should display the example result not only picture.
this is the coolest place ever! After visiting all kinds of sites, I figured out that this one is the most interesting
Pingback: 10 best CSS hacks
Nice solution. Was really helpful
Pingback: Beats Programming Timbaland Style Javascript Tutorial J2ee
Pingback: Webpage Templates Design Your Own Kitchen Kitchen Island Design
Pingback: seo toolbar
nice blog
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; }
Very nice one Jonathan, thanks!
Pingback: 10 Great CSS Hacks « Thatgrafix Blog
why didn’t I think about image background? very good idea.
The HTML Dog link is broken – I think you forgot to prefix it with http://
I think the correct URL is probably http://htmldog.com/ptg/archives/000017.php
Hmm.. You also don’t seem to indicate which fields are mandatory on your comment form. I’ve just been told I need to fill in my email address – which wasn’t obvious.
why didn’t I think about image background? very good idea.
Pingback: 10 best CSS hacks - Nagpur Chat Room
Thanks Best Regards
Great, thanks for clearing what is it finally!
I think it was a great article.
%100 Doğal ve hiç bir yan etkisi olmayan Uzamax’ı keşfedin
UZAMAX içeriğinde mineral ve vitaminler barındıran, doğal bitkielerden üretilmiş gıda desteğidir. İçeriğinde herhangi bir kimyasal ürün bulunmamakla birlikte tamamen doğal kurutulmuş bitkisel bir karışımdır. Sadece birkaç aylık kullanım kürü sonrasında bile uzamax’ın etkisini hissedeceksiniz.
Uzamax kullanarak doğal yollarla bünyenize gerekli olan tüm besin, vitamin ve mineralleri vücudunuza almanızı sağlar.izlanda yosun hapı
chat
white is better