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?

Select sizing differs from inputs sizing because of different box-sizing. Input has box-sizing set to "content-box" while select has box-sizing set to 'border-box'. In example below input will be wider than select:

<input type="text" name="a" value="a" style="width:100px; border:5px solid red; padding: 10px;" />
<select name="b" style="width:100px; border:5px solid red; padding: 10px;" /><option value="b">b</option></select>

it is because full width for input will be width+padding(left+right)+border(left+right) and for select full width will be just width (but you know that). To make both element behave same way you have to change box-sizing model. In example below input and select will have exactly the same width*:

<input type="text" name="a" value="a" style="width:100px; border:5px solid red; padding: 10px;" />
<select name="b" style="box-sizing: content-box; width:100px; border:5px solid red; padding: 10px;" /><option value="b">b</option></select>

*use -moz-box-sizing for firefox

As i know this behavior is consistent in all modern browsers (including iE6) but i dont know why it works this way. Don't know any W3 spec where is this particular behavior described. There is note suggesting default styling but it covers only simple attributes - that's why reseting default css is so popular.

I used this on CSS an work perfectly:

input, select
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

With this you force the behavior of inputs and select to be the same.

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.

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 )