Hide default component [arrow] form select in IE

Question

I got a problem here at IE.

I am styling the select component of the form, hiding the arrow that comes by default from the browser to load an image in its place.

In FF and Chrome was quiet, but in IE is appearing the default arrow of the browser, I gave a search and tests on all possible variants of the same but said whose continues to appear, even using:

select::-ms-expand {
display: none;
}

Code:

form select{
    background: transparent;
    border: 1px solid #DDDDDD;
    border-radius: 5px 0 0 5px;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2) inset;
    color: #999; 
    font-size: 14px;
    height: 45px;  
    padding: 0 5px;
    width: 250px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none; 
    background: url("http://www.iconesbr.net/iconesbr/2009/06/8383/8383_32x32.png") 100% / 17% no-repeat;
    text-transform: uppercase;
    select::-ms-expand { display: none; }/* Remove seta padrão do IE*/ 
    
}

select::-ms-expand {
  display: none;
}

<form method="post" action="">
        <label>
            <select name="depto" id="selectDepto">
              <option selected value=""> Busca por departamento</option>
              <option value="administração">Administração</option>
              <option value="comercial">Comercial</option>
              <option value="consultoria">Consultoria</option>
              <option value="controle de qualidade">Qualidade</option>
              <option value="desenvolvimento">Desenvolvimento</option>
              <option value="diretoria">Diretoria</option>
              <option value="endomarketing">EndoMarketing</option>
              <option value="financeiro">Financeiro</option>
              <option value="implantação">Implantação</option>
              <option value="marketing">Marketing</option>
              <option value="pré implantação">Pré-Implantação</option>
              <option value="recursos humanos">Recursos Humanos</option>
              <option value="tecnologia">Tecnologia</option>
              <option value="treinamento">Treinamento</option>                  
            </select>
       </label>
</form>           

How can I fix this?

Jsfiddle

Answer 1

Do it this way, it works in the latest versions of the browsers (IE from version 10):

.estilizar select {
    border: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff url("https://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat scroll 88% center;
    background-position: 98% center;
    width:35%;
    height:35px;
    text-indent:0.01px;
    text-overflow:"";
}

select::-ms-expand {display: none;}

<div class="estilizar">
   <select class="local">
     <option>Qual cidade irá visitar?</option>
     <option>Buenos Aires, Argentina</option>
   </select>
</div>