title: remove space in select box
body: <p>I have a few input fields in a form. I gave them all a padding of 5px but the select boxes seemingly have an additional space inside. It's not caused by padding, margin or text-indent. Text alignment is left. Is there a way to get rid of this?</p>
  
  <p><a href="https://i.stack.imgur.com/rFfbN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rFfbN.png" alt="enter image description here"></a></p>
  
  <p>Here follows my code. At the bottom is a link to the fiddle.</p>
  
  <p>CSS</p>
  
  <pre><code>input[type=text],
  select {
      padding:5px;
  }
  select {
      border:solid 1px #555;
      padding:5px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
      &lt;select&gt;
          &lt;option&gt;Test1&lt;/option&gt;
          &lt;option&gt;Test2&lt;/option&gt;
          &lt;option&gt;Test3&lt;/option&gt;
          &lt;option&gt;Test4&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input type="text" value="Test" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/64ppa5f5/" rel="nofollow noreferrer">https://jsfiddle.net/64ppa5f5/</a></p>
  
  <p>PS:</p>
  
  <p>I also shecked the zoom and it's 100%.</p>