title: Text Padding in Select Boxes
body: <p>I've just encountered an obscure issue with <code>select</code> boxes having additional space around text which doesn't seem part of the box model. Here are two pictures of what I mean:</p>
  
  <p><img src="https://i.stack.imgur.com/0PEEL.png" alt="Select Box Padding Test"></p>
  
  <p><img src="https://i.stack.imgur.com/XEosr.png" alt="Select Box Padding Test 2"></p>
  
  <p><a href="http://jsfiddle.net/hwzd88o5/4/" rel="noreferrer">Here is an example of it happening (on JSFiddle)</a> or you can view the source to my example below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>select, input
  {
   padding:0px;
   font-size:20px;
  }
  select.textIndent
  {
   text-indent:-1.5px;
  }
  select.paddingOffset
  {
   padding-left:2.5px;
  }
  input.paddingOffset
  {
   padding-left:5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;No Padding Test&lt;/h3&gt;
  &lt;select&gt;
   &lt;option&gt;Item 1&lt;/option&gt;
   &lt;option&gt;Item 2&lt;/option&gt;
   &lt;option&gt;Item 3&lt;/option&gt;
  &lt;/select&gt;&lt;br /&gt;
  &lt;input type="text" value="Item 1" /&gt;
  &lt;h3&gt;Negative Text Indent&lt;/h3&gt;
  &lt;select class="textIndent"&gt;
   &lt;option&gt;Item 1&lt;/option&gt;
   &lt;option&gt;Item 2&lt;/option&gt;
   &lt;option&gt;Item 3&lt;/option&gt;
  &lt;/select&gt;&lt;br /&gt;
  &lt;input type="text" value="Item 1" /&gt;
  &lt;h3&gt;Padding Offset&lt;/h3&gt;
  &lt;select class="paddingOffset"&gt;
   &lt;option&gt;Item 1&lt;/option&gt;
   &lt;option&gt;Item 2&lt;/option&gt;
   &lt;option&gt;Item 3&lt;/option&gt;
  &lt;/select&gt;&lt;br /&gt;
  &lt;input class="paddingOffset" type="text" value="Item 1" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have already worked out two methods of trying to work around it, by either having a negative <code>text-indent</code> or using left padding to adjust the <code>input</code> and <code>select</code> boxes to match up.</p>
  
  <p>Both of these methods aren't perfect. There is a difference between the negative <code>text-indent</code> for Chrome and Firefox resulting in a noticeable space if the <code>select</code> and <code>input</code> are lined up one after the other. Trying to offset the padding can make maintaining the styling of various <code>input</code> and <code>select</code> fields somewhat difficult where you are applying a percentage of padding.</p>
  
  <p>I first noticed it on a client's website where part of the word was being cut off however if that empty space was not there, the word looks like it would fit.</p>
  
  <p><img src="https://i.stack.imgur.com/s1WWj.png" alt="Client example of the issue"></p>
  
  <p>While I can work around this particular issue for my client (eg. wider <code>select</code> box, less padding), I want to know whether there is a different solution for hiding/offsetting/removing the "other" padding on the left/right of the text. Is there another CSS property I should be looking at?</p>
  
  <p>I have a feeling this might just be how <code>select</code> boxes work but would like the collective hive of SO to prove me wrong.</p>
  
  <h3>Edit 1</h3>
  
  <p>I am hoping that the solution would be pure-CSS. I know that if I use a drop-in replacement for a <code>select</code> box using a JS library, it would not have the same issue.</p>
  
  <h3>Edit 2</h3>
  
  <p>Just to better clarify what I am after, the <code>select</code> box has an additional padding outside the box model. The pictures below show 6px for the <code>select</code> box and ~3px for the <code>input</code>. I would like to either control this particular padding or remove it entirely. I have already tried with <code>text-indent</code> and using a padding offset to align the text in the <code>input</code> and <code>select</code> elements but both of these seem hackish. I think there is a better CSS way of doing this.</p>
  
  <p><img src="https://i.stack.imgur.com/36iDx.png" alt="Example Clarified 1"></p>
  
  <p><img src="https://i.stack.imgur.com/EzuQf.png" alt="Example Clarified 2"></p>