Input background colour destroys styling?

Answer 1

Check out what styles the normal input field is getting for border. And apply that to the error one also.

Answer 2

Change your HTML to be like this:

<p><input type="text" value="text" style="border:1px solid #999999;" /></p> 
<p><input type="text" value="text" style="background-color: #FFDDDD;border:1px solid #999999;" /></p>

Edit: If you want it to look consistent across all browsers and not only slightly rounded in Mozilla then you'll have to do a lot more work. Here's a link that will show you how to completely override the textbox style.

Answer 3

Here the browser is using its default styling.

I would suggest adding something like the following CSS to BOTH inputs, then they will look consistent.

border: solid 1px #ccc;

Answer 4

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.

Answer 5

Short answer: no.

Browsers and form controls is without doubt the most inconsistent part of CSS. All I can suggest is to use a 1px border on input fields, as most browsers use something similar to this. CSS3 rounded corners should also work in a few browsers.

input.text {
  border: 1px solid #ccc;
  background-color: #fcc;
  border-radius: 4px;
  -moz-border-radius: 4px;
}

You will find this page at 456 Berea Street interesting. It showcases how each browser applies different styles on text boxes.

Answer 6

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 :)