title: Drop down menu: remove overlap between text and customised arrow in Chrome
body: <p>I'd like to remove the overlap between the arrow and text in Chrome if possible. </p>
  
  <p><strong>This is what happens in different browsers:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/uOYja.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uOYja.png" alt="Dropdown Example"></a></p>
  
  <p><strong>This is the code:</strong></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>.search-options-wrapper select {
      -webkit-appearance: none;
      -moz-appearance: none;
      background: url("http://i60.tinypic.com/w888ic.png") no-repeat 88px center;
      background-size: 12px; 
      overflow:hidden;
      display: flex;
      border: 0; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="search-options-wrapper"&gt; 
      &lt;select id="options-primary"&gt;
          &lt;option&gt;short text&lt;/option&gt;
          &lt;option&gt;Long text lalalalalaa&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>