Menu
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.
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.
<div> here)
213
It means that border on the input box is actually inside the width of the input rather than being added onto the outside. This is what is making the input larger than the container. The points he makes about padding also apply for the border. As noted in other answers, it may need width: 100%; height: 100% .
This can be done by using the size attribute or by width attribute to set the width of an element. The size attribute works with the following input types: text, search, tel, url, email, and password and not on type date, image, time for these we can use width attribute. Create a div in which we are putting our input.
Definition and UsageThe width attribute specifies the width of the <input> element. Note: The width attribute is used only with <input type="image"> . Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.
fontSize="14pt"; If you simply want to specify the height and font size, use CSS or style attributes, e.g. //in your CSS file or <style> tag #textboxid { height:200px; font-size:14pt; } <! --in your HTML--> <input id="textboxid" ...>
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/
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
