Tutorial :Why do inputs and selects use different box models?

Question:

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?

Solution:1

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.

Solution:2

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.

Solution:3

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.

Solution:4

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 )

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com