Enteries RSS (1017) 01
2008
0:06 am
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 1×1px 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;
}
del.icio.us (
StumbleUpon
Digg
Wong it
21 Responses, this is the coolest place ever! After visiting all kinds of sites, I figured out that this one is the most interesting
March 13th
2008
9:16 am
That was a nice post. However you should display the example result not only picture.
February 24th
2008
14:06 pm
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.
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.
wow. awesome. a client was just asking about this and i hadn’t heard of this hack before. thanks 
January 19th
2008
1:20 am
@ 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.
January 19th
2008
0:39 am
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.
January 18th
2008
19:53 pm
@ 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
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?
January 8th
2008
16:26 pm
@ 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 
January 8th
2008
16:12 pm
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.
I was actually curious why Firefox does that to begin with? Are you sure not an accessibility reason?
January 6th
2008
19:51 pm
@ 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
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).
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?
January 2nd
2008
0:09 am
cOol…
- Apr 18, 2008: 10 best CSS hacks
- Mar 7, 2008: Thatgrafix Web Design Portland Oregon
Hvymajkl:
April 22nd
2008
6:46 am
Nice solution. Was really helpful