Home/ Questions/Q 8123155
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T06:04:54+00:00

Given a <select> and an <input> element, both specified to be 200px wide: <!doctype

  • 0

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:

enter image description here

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:

enter image description here

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:

enter image description here

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0