setting input background color: internet explorer vs mozilla

[EricM]

I'm trying to use an inline style to specify the background color for input boxes. Black text on an orange background.

.texta
{
color: black;
border: 1px solid black;
background-color: #fd950e;
}

When I apply this style to a text input box, it displays like I think it should in Mozilla 1.7. When I view the same using IE 5.5, the page first loads with the orange background for the input box, but then quickly refreshes to more of a yellow color. Here's a picture. IE on top; Mozilla on the bottom:

<No URLs, thanks. See TOS [WebmasterWorld.com]>

If instead of using a text input, I use a textarea, then both Mozilla and IE show it with having an orange background, as expcted.

Here's a link to my test page:

<No URLs, thanks. See TOS [WebmasterWorld.com]>

The only workaround I've found so far is to use a single row textarea instead of text input boxes. But those aren't really ideal either. It looks weird having the scroll arrows display for what should be a single line text box. :)

Any idea why IE is first showing the correct background color and then refreshing to something completely different?

Thanks!

[edited by: DrDoc at 5:22 am (utc) on July 18, 2004]

[DrDoc]

Welcome to WebmasterWorld! [WebmasterWorld.com]

When I view the same using IE 5.5, the page first loads with the orange background for the input box, but then quickly refreshes to more of a yellow color.

You're using the Google toolbar, aren't you? ;)

[toolbar.google.com...] see yellow-colored form fields on web pages...

The simplest workaround is to simply use non-standard names for the fields. For example, instead of using "username" and "password" as names you could use "emanresu" and "drowssap" (words backwards). I know, silly example... but it works. Or, an even better option, you could just live with it ;) Other people will be using the Google toolbar as well (or other similar functions) that may no longer function as they would be expected to.

[EricM]

You're using the Google toolbar, aren't you? ;)

Yes, I am. When I disable it, everything works as expected.

Since the yellow is expected behavior, I'll take your advice and leave it alone. I'm new to using CSS and thought I was doing something wrong with how I was specifying the colors.

(Sorry about linking the URLs. Figured it would help to show a picture of what I was seeing.)

Thanks!

[WendyF]

If you choose Options from your Google toolbar and then More and then uncheck Automatically Highlight Fields that AutoFill can fill, this will solve the problem without having to disable the whole toolbar. I've just spent half a day trying to solve this one, so the earlier advice was very helpful.