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;
}