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

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