Input background colour destroys styling?

Question

I am creating a form which is validated under jQuery Validation. I want to apply a light-red background colour to inputs which are invalid and need to be corrected.

When I apply background-color: #FFCCCC; to the input, the attractive styling seems to be removed and a hard border replaces it. For example, with a text input in Firefox:

Styled and unstyled text input http://liranuna.com/strager/b/textbox-difference.png
(Live demo)

This occurs with several browsers. It also occurs if I set any background other than #FFFFFF.

Is there a way to preserve styling while applying a background colour?

I am open to Javascript solutions which emulate the style somehow.

Answer 1

Sorry - any sort of styling on input elements tends to destroy their OS/browser defaults. The default inputs are rendered in an entirely different way - it's not like they're coded into the browser as CSS styles, unfortunately.

The best thing to do here is, rather than try to make your red-background inputs emulate normal ones, create your own attractive styling! If you like those light borders, use border: 1px #ccc solid. If you like round corners, take advantage of border-radius and -moz-border-radius - for those who are on the edge of browser development, they'll have 'em. For those who aren't, they won't notice the difference.

In short, don't try to make the inputs fit in with the OS environment, but rather style them to your own site's look and feel. This will create better design for your website overall :)

Answer 2

I'd say the default (Windows 2000) look of the controls is easier to implement for the browser vendors. A browser has to draw everything itself, including any controls. That they look native in their default style is just a little convenience for the user but without something really fancy (and heavyweight) like WPF it quickly becomes unwieldly to draw the control correctly with visual styles of the OS and CSS applied.

The exact style is also dependent on the OS and therefore a solution giving you exactly one look might not be what most visitors of your site want. Then again, using only CSS you can achieve The One Look™. If that just happens to look like the native one on a specific OS, well, then so be it :-)

What you're looking for might probably be emulated a little by using a light-gray border and on hover/focus a light blue one, emulating the Aero look of Vista and Windows 7.