views:

34

answers:

2

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.

+2  A: 

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.

greenie
+2  A: 

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

bobince
good answer, I had trouble figuring this out but you've make it real clear. My biggest complaint when it comes to forms is that you can't style an input of type = "file" - this can really mess with the look of a form, especially when you've taken the time to style all the other inputs.
stephenmurdoch
Yeah, file upload fields are a law unto themselves. Although custom-styling form fields in general is fraught with difficulty and often best avoided, you can at least set the widths of fields to make them line up nicely, which is more than can be managed for file uploads.
bobince