title: Aligning text and select boxes to the same width in CSS?
body: <p>Ok this is seemingly impossible to get right. I have a text box and a select box. I want them to be the same width exactly so they line up on the left margin and the right margin.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              input, select {
                  width: 200px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;input type="text" value="ABC"&gt;&lt;br&gt;
          &lt;select&gt;
              &lt;option&gt;123&lt;/option&gt;
          &lt;/select&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>That would do it you think, right? Nope. The select box is 6px shorter in Firefox. See screenshot. <img src="https://i.stack.imgur.com/pvIQi.png" alt="screenshot in firefox"></p>
  
  <p>Ok so lets edit the code and make two styles.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      input {
          width: 200px;
      }
      select {
          width: 206px;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>Ok that works!</p>
  
  <p><img src="https://i.stack.imgur.com/ij6Sv.png" alt="Fixed in Firefox"></p>
  
  <p>Oh wait, better test in Chrome...</p>
  
  <p><img src="https://i.stack.imgur.com/jpolD.png" alt="chrome screenshot"></p>
  
  <p><img src="https://i.stack.imgur.com/R1BrW.png" alt="FFFFFFFUUUUUUUUUUUU"></p>
  
  <p>Can someone tell me how to line these up in all browsers? Why can't I just do width: 200px on all, why do all the browsers display it differently? Also while we're at it why is the text box and select box different heights? How do we get them to the same height? Have tried height and line-height no no avail.</p>
  
  <hr>
  
  <h2>Solution:</h2>
  
  <p>Ok I've found the solution with some help from the answers below. The key is to use the <strong>box-sizing: border-box</strong> property so when you specify the width that <em>includes</em> the border and padding. See <a href="http://www.reddit.com/r/webdev/comments/s8u0p/wow_this_speced_behavior_was_the_source_of_so/c4c6cuy" rel="noreferrer">excellent explanation here</a>. Then the browser can't stuff it up.</p>
  
  <p>Code is below, have also set the height of the boxes to the same size and indented the text inside the box so it lines up. You also need to set the border as Chrome has a really weird looking border it uses for select boxes which will throw out the alignment. This will work for HTML5 sites (e.g. supporting IE9, Firefox, Chrome, Safari, Opera etc).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              input, select {
                  width: 200px;
                  border: 1px solid #000;
                  padding: 0;
                  margin: 0;
                  height: 22px;
                  -moz-box-sizing: border-box;
                  -webkit-box-sizing: border-box;
                  box-sizing: border-box;
              }
              input {
                  text-indent: 4px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;input type="text" value="ABC"&gt;&lt;br&gt;
          &lt;select&gt;
              &lt;option&gt;123&lt;/option&gt;
              &lt;option&gt;123456789 123123123123&lt;/option&gt;
              &lt;option&gt;123456789 123123123123 134213721381212&lt;/option&gt;
          &lt;/select&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Just one final warning you may not want input buttons, checkboxes etc to be included in this styling so use the <code>input:not([type='button'])</code> to not apply it to certain types or use <code>input[type='text'], input[type='password']</code> to specify ones you do want it to apply to.</p>