Why do inputs and selects use different box models?

views:

answers:

+3 Q:

Why do inputs and selects use different box models?

It appears (at least in IE 8 and Firefox 3) that for <input> elements the width refers to the content, but for <select> elements the width refers to the content + borders. I am explicitly specifying the width in the CSS style.

What's the deal? I would have thought that both are inline replaced elements and would behave identically. Is this behavior consistent with W3C standards? Does it work this way in all major browsers?

+1 A:

Browsers were around before the W3C so they defined their own rendering rules. Browsers won't ever be consistent ( in the near future ) in regards to form control styling because default browser styles are inconsistent and form controls are rendered by different OSes.

This site lists default browser styles: http://www.iecss.com/ ( The styling of inputs is inconsistent )

meder 2010-07-16 01:16:16

Thanks for the answer. But I'm not really asking about default styles, but rather about why when I explicitly set a style (e.g. `width: 150px`) this is treated differently on <input>'s vs. <select>'s.

Tim Goodman 2010-07-16 02:55:19

@meder Nice resource, thanks!

Felipe Alsacreations 2010-07-18 18:41:54

It is generally a best practice to "reset" the base styles of all controls and other common elements (like html, body, etc.) to a common ground minimum. While not guaranteed to produce perfectly matching controls in all browsers, it gets you much closer. There are a wide variety of premade reset CSS that you can simply use off of the internet. One of the most common is YUI's reset css:

YUI Reset CSS

Once resetting your CSS, to resolve the width discrepancy, you would simply need to set a standard default border and padding for your input controls that properly accommodates your sites style.

jrista 2010-07-16 01:20:35

Thanks for the answer, but my question is less about the default styles than why a style that I set is treated differently. I mean, I know I can set the width and borders to whatever I want, say `width:150px; border-width:2px` but why does this produce an element with 150px internal width for <input>'s and 150px external width (border included) for <select>'s? And is that strange fact true in all major browsers?

Tim Goodman 2010-07-16 01:49:16

@Tim: I do see the problem (I guess I misunderstood the original intent of your question before). As for "why"...I doubt anyone really knows. I do know that in IE8 and FF3, they make use of the underlying system controls to render `input` and `select`. Some other browsers do fully custom rendering of such controls. Depending on the OS, it is entirely possible that any browsers that are OS-dependent for rendering input and select controls will have differing behavior. It is an annoying quirk, and one that really shouldn't exist in the modern age of pixel-perfect layout...but...what can you do?

jrista 2010-07-16 02:16:07

@jrista: That's interesting, thanks.

Tim Goodman 2010-07-16 02:57:29

ansaurus

tags:

views:

answers:

Why do inputs and selects use different box models?

related questions