title: Image for <option> works in firefox but not works in other browsers
body: <p>html:</p>
  
  <pre><code>&lt;select size="10" style="width: 325px; background-color: #fff;" class="postCode"&gt;
      &lt;option value="36621746_0S_F"&gt;6 Upperkirkgate Aberdeen&lt;/option&gt;
      &lt;option value="31560744_0S_F"&gt;12A Upperkirkgate Aberdeen&lt;/option&gt;
      &lt;option value="31560745_0S_F"&gt;12B Upperkirkgate Aberdeen&lt;/option&gt;
      &lt;option value="36621735_0S_F"&gt;36 Upperkirkgate Aberdeen&lt;/option&gt;
      &lt;option value="35390362_0S_F"&gt;48-58 Upperkirkgate Aberdeen&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.postCode {
      background-color: rgba(0, 0, 0, 0);
  }
  .postCode option
  {
      background-color: rgba(0, 0, 0, 0);
      background-image: url('../img/house.png');
      background-repeat: no-repeat;
      background-position: left top;
      text-indent: 2em;
  }
  </code></pre>
  
  <hr>
  
  <p><strong>In Firefox</strong></p>
  
  <p><img src="https://i.stack.imgur.com/TGowa.png" alt="In Firefox"></p>
  
  <p><strong>In Chrome</strong></p>
  
  <p><img src="https://i.stack.imgur.com/VjfWk.png" alt="In Chrome"></p>
  
  <p>Please help me.</p>
  
  <p>UPD: 
   - IE8 in the same result as in Chrome</p>