title: How to set the same width for HTML text input and drop down input
body: <p>I have the two HTML elements like so:</p>
  
  <pre><code>&lt;input type="text"&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;select&gt;
    &lt;option&gt;Apple&lt;/option&gt;
    &lt;option&gt;Orange&lt;/option&gt;
    &lt;option&gt;Banana&lt;/option&gt;
    &lt;option&gt;Grapes&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I am not at all able to make them the same width. No matter what width I specify for BOTH the elements, 100% or 200px or whatever, the drop down always seems to be about 5px shorter than the text box. This happens in IE, Firefox and Chrome - in WINDOWS.</p>
  
  <p>How can I set them to have the same width?</p>
  
  <p><strong>Solution</strong></p>
  
  <pre><code>input, select
  {
      -ms-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      -webkit-box-sizing:border-box; 
  }
  </code></pre>