9

Estou com um problema aqui no IE.

Estou estilizando o componente select do form, ocultando a seta que vem por default do browser para carregar uma imagem no lugar da mesma.

No FF e Chrome foi tranquilo, porém no IE está aparecendo a seta default do browser, dei uma pesquisada e testes sobre todas as possíveis variantes do mesmo mas o dito cujo continua aparecendo, mesmo utilizando:

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

Código:

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>           

Como posso resolver isto?

JSFiddle

6

1 Resposta 1

1

Faça desta forma, funciona nas versões mais recentes dos navegadores (IE a partir da versão 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>

4
  • Quando diz "qualquer navegador", você se refere a quais exatamente? Até aonde sei no IE9 isso não funciona.
    – Syzoth
    27/01/2017 às 15:21
  • A partir do IE 10 funciona, o correto não é dar suporte as versões antigas do IE, a microsoft já não dá mais (microsoft.com/pt-br/windowsforbusiness/end-of-ie-support). Para que a internet evolua, devemos inovar, já ouviu falar de graceful degradation? Para aqueles que inovam utilizando navegadores modernos verão as novidades, para os que não usam tem que se contentar com o que o navegador suporta. 27/01/2017 às 16:54
  • 1
    isso não importa, o que estou falando é sobre seu texto, as pessoas não entendem sobre fim de suporte muitas vezes, muito menos o usuário final. Em qualquer navegador é forçar um pouco ... [uma pausa .......... lembre-se isso é uma critica construtiva] .................. O texto seria mais interessante se destacar algo como, funciona no IE10+, Firefox e Chrome
    – Syzoth
    27/01/2017 às 16:56
  • Concordo com você Guilherme, entendo sua crítica como construtiva, só estou explicando a quem interessar ler este comentário, o motivo pelo qual devemos contribuir para a evolução da internet. Vou inserir na minha resposta a versão do IE que esta sugestão atende. 27/01/2017 às 17:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .