title: Select form element inner text spacing
body: <p>I found this inconsistent behaviour on the select element between -webkit and other browsers. The spacing for the text inside the element isn't consistent with the other input elements. (See example). The selects have an extra <strong>~2px of spacing on the left</strong>. Thus not aligning horizontally with the input element above.</p>
  
  <p><strong>Chrome</strong> works fine, the text in the elements aligns up horizontally.</p>
  
  <p><a href="https://i.stack.imgur.com/y3WUm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y3WUm.png" alt="Chrome select"></a></p>
  
  <p><strong>Firefox</strong> Does not align perfectly horizontally with the input above.</p>
  
  <p><a href="https://i.stack.imgur.com/aK9Wb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aK9Wb.png" alt="Firefox select"></a></p>
  
  <p>The padding on the elements is the same. Only this spacing I can't explain exists in the select elements other then on -webkit browsers. I've checked it in:</p>
  
  <ul>
  <li>Safari (no padding aligns fine)</li>
  <li>Chrome (no padding aligns fine)</li>
  <li>Firefox</li>
  <li>Edge</li>
  <li>IE11</li>
  </ul>
  
  <p>FF, Edge and IE11 all have that (for me) unexplainable spacing. There is no text-indent, no nothing that I could find that explains this extra space.</p>
  
  <p>Here is my (simplified) css for the input and select</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
      font-size: 93.75%;
      line-height: 2;
      min-height: 100%;
      webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
  }
  
  body {
      margin: 0;
      padding: 0;
      position: relative;
      background-color: #fff;
  }
  
  * {
      box-sizing: border-box;
  }
  
  .form
  {
    background: #f1f1f1;
    padding: 15px;
    margin: 30px;
    max-width: 250px;
  border-radius: 3px;
  }
  
  .form__group + .form__group
  {
    margin-top: 10px;
  }
  
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"] {
      border: 1px solid #999;
      padding: 6.5px 14px;
      margin: 0;
      width: 100%;
      border-radius: 0;
      -webkit-appearance: none;
      line-height: inherit;
      border-radius: 3px;
      height: 3rem;
      font-size: 14px;
      line-height: 24px;
  }
  
  select {
      font-size: 14px;
      line-height: 24px;
      -webkit-appearance: none;
      -webkit-padding-end: 29px !important;
      -webkit-padding-start: 14px !important;
      -moz-appearance: none;
      -o-appearance: none;
      appearance: none;
      border: 1px solid #999;
      padding: 6.5px 29px 6.5px 14px;
      margin: 0;
      width: 100%;
      outline: 0;
      border-radius: 3px;
      background: #fff;
      color: #484A4E;
      cursor: pointer;
      height: 3rem;
      background-size: 30px 50px;
      background-position: right center;
      background-repeat: no-repeat;
      background-image: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJyB2aWV3Q…lsZT0nZmlsbDojREZFNEVDOycgcG9pbnRzPScxNSwxNyAxMCwyMiAyMCwyMicvPjwvc3ZnPg==);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form"&gt;
    &lt;div class="form__group"&gt;
      &lt;input type="text" name="example-input" value="" placeholder="Example input" /&gt;
    &lt;/div&gt;
    &lt;div class="form__group"&gt;
      &lt;select name="example-select"&gt;
        &lt;option value=""&gt;Example select&lt;/option&gt;
        &lt;option value="example"&gt;Example select item&lt;/option&gt;
        &lt;option value="another"&gt;Another one&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update 08 / 2018</strong></p>
  
  <p>After some more headache and searching the web I found two answers <a href="https://stackoverflow.com/questions/38994982/remove-space-in-select-box">here</a> and <a href="https://stackoverflow.com/questions/27006354/text-padding-in-select-boxes">here</a> that seem to "answer" my question. The answer is just as I thought inconsistency in browser rendering. No simple css way to fix the issue unfortunately.</p>