title: Select arrow style change
body: <p>I'm trying to replace the arrow of a select with a picture of my own. I'm including the select in a div with the same size, I set the background of the select as transparent and I'm including a picture(with the same size as the arrow) in the right top corner of the div as background. </p>
  
  <p>It only works in Chrome. </p>
  
  <p><img src="https://i.stack.imgur.com/o2JSU.png" alt="enter image description here"> </p>
  
  <p>How can I make it work in Firefox and IE9 where I'm getting this: </p>
  
  <p><img src="https://i.stack.imgur.com/EpxWl.png" alt="enter image description here"></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>.styled-select {
    width: 100px;
    height: 17px;
    overflow: hidden;
    overflow: -moz-hidden-unscrollable;
    background: url(images/downarrow_blue.png) no-repeat right white;
    border: 2px double red;
    display: inline-block;
    position: relative;
  }
  
  .styled-select select {
    background: transparent;
    -webkit-appearance: none;
    width: 100px;
    font-size: 11px;
    border: 0;
    height: 17px;
    position: absolute;
    left: 0;
    top: 0;
  }
  
  body {
    background-color: #333333;
    color: #FFFFFF;
  }
  
  .block label {
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;HTML&gt;
  
  &lt;HEAD&gt;
  &lt;/HEAD&gt;
  
  &lt;BODY&gt;
    &lt;p/&gt;
    &lt;form action="/prepareUpdateCategoryList.do?forwardto=search"&gt;
  
      &lt;fieldset class="block" id="searchBlock"&gt;
        &lt;p&gt;
          &lt;label style="width:80px"&gt;Class&lt;/label&gt;
          &lt;div class="styled-select"&gt;
            &lt;select property="voucherCategoryClass"&gt;
        &lt;option value="0"&gt;Select &lt;/option&gt;
        &lt;option value="7382"&gt;steam &lt;/option&gt;
       &lt;/select&gt;
          &lt;/div&gt;
  
        &lt;/p&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  &lt;/BODY&gt;
  
  &lt;/HTML&gt;</code></pre>
  </div>
  </div>
  </p>