Why Do Text Inputs Change Their Border Attributes When A Background Color Is Applied?

Here's an example, I'm looking at in in FF 3.6 and the input with background: transparent has a different border to the untouched one. http://jsfiddle.net/Pa2Kd/

Solution 1:

My hypothesis is that, when the style is unaltered, a native Win32 control is used, with its default settings (more or less). But when you do alter the style, a custom control is used, or a more customized version of the Win32 control.

I remember similar things from when I was a boy and toyed with the scrollbars in Internet Explorer 4: They look normal if you do not mess with them (the theme of the OS), but if you do, they get "flat". Another thing is buttons: Windows Aero buttons look like they do - there is not really much to change. If you want to change the color of the button, you need to "disable" Aero theming of the button, and you get an old-style 3D, or flat, button, depending on your browser.

Just some thought. I might be entirely wrong, for web design is not my major field.

Solution 2:

I second what Andreas says.

I don't know why exactly this is neither. I deduct from experience that when one of the border background-color visual attributes is altered, the browser switches from "OS rendering style" mode to "create rendering rules yourself" mode. Sadly, to my knowledge there is no CSS way of getting back to the OS rendering style.

The only way I can see to deal with this is to define a consistent ruleset for controls - which is a shame, because it's a perfectly logical choice to leave those styles rules to the user's OS.

Solution 3:

Like the others said, this is due to default OS styling that is cleared as soon as you add any properties. You can mimick the default styling with CSS, though it would probably be overkill to do an OS detection and apply different CSS rules accordingly. Instead you could choose an OS styling that you like and apply that as the default for all text-inputs. Mac OSX styling can be reasonably reproduced with the following CSS:

#background {
    background: transparent;
    border:1px solid #ddd;
    padding:2px;
    -webkit-box-shadow:inset 0px 1px 2px #333;
    -moz-box-shadow:inset 0px 1px 2px #333;
    box-shadow:inset 0px 1px 2px #333;
}
​

Season to taste.