default textbox appearance in firefox/safari

Question

Firebug claims that an unstyled textbox is border: 3px inset #F0F0F0;

However, <input type="textbox" style="border: 3px inset #F0F0F0;" /> and <input type="textbox" /> produce very different looking borders. What's going on here?

This is true in Safari, Chrome, and Firefox—I don't have IE though, so I dunno about that.

Answer 1

Different browsers on different operating systems will have various default form control styles to match the UI of the operating system. Once you start to style any form element then you'll notice that the browser will add in it's own default styles as well (which you can override).

Firebug is probably just reporting that particular default browser style for the textbox, but it's not visible as their is no other styling for that element so the OS UI is being used instead.

Answer 2

How it's supposed to work: if the appearance/-moz-appearance/-webkit-appearance property is set to something other than none—as it is for <input type="text"> in the browser's default stylesheet—then the normal CSS border/background of an element is discarded in favour of platform-specific theming, which may look different to the flat 3D objects afforded by plain old CSS, on platforms that have themes.

<div style="-moz-appearance: textfield">x</div>
<input style="-moz-appearance: none" value="x"/>

The odd and as-far-as-I-can-tell-undocumented catch is that if any background or border rules at all have been set on an element, its -moz-appearance is ignored and none is substituted, resulting in the flat-3D border style you see in your example, which is what inputs look like without the theming.

This is true even if the rules do not result in a different computed value of those styles than would have been present without them. Only background: default; border: default avoids triggering this behaviour.

(IE behaves similarly, though it doesn't expose an appearance style. Also users of the XP/2000 ‘classic’ theme won't see a difference because IE renders the CSS inset/outset border-styles in such a way that it matches the ‘classic’ Windows style anyway.)