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.

Matchu · Accepted Answer · 2009-05-18 23:32:04Z

21

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

answered May 18, 2009 at 23:32

Matchu

86.1k18 gold badges155 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joey · Accepted Answer · 2009-05-18 23:13:52Z

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.

DisgruntledGoat · Accepted Answer · 2009-05-18 23:13:24Z

3

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.

answered May 18, 2009 at 23:13

DisgruntledGoat

73k70 gold badges214 silver badges295 bronze badges

Comments

David Snabel-Caunt · Accepted Answer · 2009-05-18 22:49:12Z

2

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;

answered May 18, 2009 at 22:49

David Snabel-Caunt

58.4k13 gold badges118 silver badges132 bronze badges

Comments

Ólafur Waage · Accepted Answer · 2009-05-18 22:44:18Z

0

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

answered May 18, 2009 at 22:44

Ólafur Waage

70.3k22 gold badges147 silver badges199 bronze badges

2 Comments

strager Over a year ago

Can you reword please? I'm not sure what you're saying. =S

Joey Over a year ago

I think he means that you should look at the default styles (for border) and apply them manually after setting the background. I doubt that this will work, though as the default styles didn't change just because the background did. The rendering of the control did, though :)

Dave L · Accepted Answer · 2009-05-18 22:54:05Z

0

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.

edited May 18, 2009 at 22:54

answered May 18, 2009 at 22:48

Dave L

1,6349 silver badges10 bronze badges

2 Comments

strager Over a year ago

Not really what I want. I'll consider that as a last resort.

strager Over a year ago

On your edit, those special stylings require a fixed-width input. I need variable-width inputs.

Collectives™ on Stack Overflow

Input background colour destroys styling?

6 Answers 6

Comments

Comments

Comments

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related