Hide default component [arrow] form select in IE

Question

Hide default component [arrow] form select in IE

Navigation

#1 by (1 votes)

10

I have a problem here in IE.

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

In FF and Chrome it was quiet, but IE is displaying the default arrow of the browser, I searched and tested all possible variants of it but the one whose continued appearing, 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 resolve this?

JSFiddle

css html-select internet-explorer

asked by anonymous 25.02.2015 / 16:10

1 answer

Increase dblib connection timeout with PDO How to get information from shares on facebook with R?

score 1 · Answer 1

In this way, it works in the latest versions of 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>