Why is <INPUT> wider than I told it to be?
Given a <select> and an <input> element, both specified to be 200px wide:
<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px" type="text">
</body>
<html>
One ends up wider1,2,3, 4 than the other:
What is the reason for this?
If someone can give the reason, perhaps the solution would be obvious, and not a hack&pray.
Layout
The applied layout is perfectly reasonable:
Update 1: While i was writing this question Chrome updated itself from 17 to 19.
Update 2: Changing padding in the <input> from 1 to zero:
<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>
doesn't make the <input> 200px wide (i.e. doesn't fix it).
Update 3: Applying a CSS reset:
<!doctype html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>
Does not solve the problem:
Also, i am less interested in a solution than an explanation.
Footnotes
- 1,2,3 Chrome
1719, Firefox, Internet Explorer 9 - 4 on Windows 7 64-bit
Bonus Reading
- How to make <option> wider than <select> in IE6? (i don't want the option to be wider than the select, i'm not using IE6)
- How to show extended option in select list? (width of dropdown matches width of control)
- HTML input element wider than Containing Div (no containing
<div>here) - How to line up HTML input elements?
Answer
Your <input> isn't too wide; your <select> is too narrow!
The real issue is that the
<select>element doesn't behave like most elements do. It uses abox-sizing: border-box;where
widthis the width of the element after padding and borders are applied; behaving as though it alone were in "quirks" mode.This runs counter to every other standards mode html element, which use:
box-sizing: content-box;To fix it, change the
<select>to use the same box model as the rest of html:select { box-sizing: content-box; }OR change the
<input>to use the same box model as the select:input { box-sizing: border-box; }
The input element behaves like most elements do, using a content-box model, where the width is the width of the element before padding and borders are applied.
There are default padding and borders set by your browser, so it is larger than you might want and/or expect. I always use a "CSS reset" at the top of my stylesheets, like so:
* {
padding: 0;
margin: 0;
}
That will ensure there are no default padding or margins on any element.
The select element is a different case though, where is behaves more like an element with box-sizing: border-box enabled, where it takes into account borders and padding into its width specification.
If you add box-sizing: border-box to your input element, it will behave exactly as you expect/want.
EDIT: Bolded the part that may be relevant to you. An alternate solution is reducing the specified width of the input element by a few pixels, so that it matches the width of the select box.
Fiddle demonstrating both solutions: http://jsfiddle.net/n4yT2/2/