title: Indenting text on html select tag
body: <p>I have a select tag which I am trying to give some style.</p>
  
  <pre><code>&lt;select class="points-selection"
          ng-options="line as line.pick for line in slip.lines"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>then I have this</p>
  
  <pre><code>  .points-selection {
      background-color: get-color(nieve);
      border: 0;
      border-radius: get-space(xxx-small);
      color: get-color(night);
      cursor: pointer;
      margin-top: get-space(xxx-small) + 1.5;
      padding: get-space(xxx-small);
      text-indent: 32.5%;
      width: 100%;
    }
  </code></pre>
  
  <p>I have that <code>text-indent</code> prop set to 32.5%.</p>
  
  <p>In chrome is doing this</p>
  
  <p><img src="https://i.stack.imgur.com/0Wdv6.png" alt="enter image description here"></p>
  
  <p>which is exactly what I need.</p>
  
  <p>But I have this on Firefox</p>
  
  <p><img src="https://i.stack.imgur.com/CRerB.png" alt="enter image description here"></p>
  
  <p>clearly the text is not centered in Firefox, that's my issue so far.</p>
  
  <p>so what should I do to fix it ?</p>