Changing form input field background colour causes it to go 3d

Looking to change just the background but retain flat 1px border

[JamieCon]

Hi All,

I'd be grateful for a little guidance. I've done a fair bit of searching but have been unable to find anything (possibly because i'm not sure what keywords to use!).

I am writing a piece of form validation JavaScript which changes the background colour of form fields that do not validate. However when I change the style of the input element via Javascript, both Firefox and Internet Explorer revert to using the old style '3d effect' form fields. Is anyone aware of a way I can prevent this?

I have tried also setting the border to 1px. This doesn't appear to have any effect.

Setting the background colour in the stylesheet also appears to have this effect, although it is possible to set the border to 1px, however it is still not the same as the original system form element.

Grateful for any help,

Jamie

[DrDoc]

This just goes to show that you should always style your elements the way you want them ... not rely on default browser behavior, as it is not only unpredictable at times, but also subject to change.

border: 1px solid #000;

Stick that in your stylesheet for the input elements ...