Why is <INPUT> wider than I told it to be?
css, html, html-input, html-select
Solution
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 a
box-sizing: border-box;
where `width` is 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/
Problem
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?