Remover a seta Selecionar no IE

Eu tenho o elemento select, eu quero remover a seta, então eu posso adicionar outro ícone. Eu posso fazer isso no Firefox Safari e Chrome, mas isso não funcionou no IE9 .

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

VEJA Fiddle no IE9 . tudo o que eu preciso é remover a seta no ie9 Por favor, JSFIDDLE responda.

No IE9, é possível com apenas um hack, conforme recomendado pelo @Spudley. Como você personalizou a altura e a largura da div e selecionou, é necessário alterar o div:beforecss para corresponder ao seu.

Caso seja o IE10, usando o css3 abaixo, é possível

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

No entanto, se você estiver interessado no plugin jQuery, tente Chosen.jsou você pode criar o seu próprio em js.

Sugiro a minha solução que você pode encontrar neste repositório do GitHub . Isso funciona também para o IE8 e IE9 com uma seta personalizada que vem de uma fonte de ícone.

Exemplos de lista suspensa personalizada entre navegadores em ação: verifique-os com todos os navegadores para ver o recurso entre navegadores.

De qualquer forma, vamos começar com os navegadores modernos e, em seguida, veremos a solução para os mais antigos.

Seta suspensa para Chrome, Firefox, Opera, Internet Explorer 10 ou superior

Para esses navegadores, é fácil definir a mesma imagem de plano de fundo para o menu suspenso para ter a mesma seta.

Para fazer isso, é necessário redefinir o estilo padrão do navegador para a selectmarca e definir novas regras de segundo plano (como sugerido anteriormente).

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

As appearanceregras são definidas como nenhuma para redefinir as configurações padrão dos navegadores. Se você deseja ter o mesmo aspecto para cada seta, mantenha-as no lugar.

As backgroundregras nos exemplos são definidas com imagens embutidas SVG que representam setas diferentes. Eles estão posicionados 98% da esquerda para manter alguma margem na borda direita (você pode modificar facilmente a posição como desejar).

Para manter o comportamento correto entre navegadores, a única outra regra que deve ser mantida no local é a outline. Essa regra redefine a borda padrão que aparece (em alguns navegadores) quando o elemento é clicado. Todas as outras regras podem ser facilmente modificadas, se necessário.

Seta suspensa para Internet Explorer 8 (IE8) e Internet Explorer 9 (IE9) usando a Fonte do ícone

Esta é a parte mais difícil ... Ou talvez não.

Não existe uma regra padrão para ocultar as setas padrão para esses navegadores (como o select::-ms-expandIE10 +). A solução é ocultar a parte do menu suspenso que contém a seta padrão e inserir uma fonte de ícone de seta (ou um SVG, se você preferir) semelhante ao SVG usado nos outros navegadores (consulte a selectregra CSS para obter mais informações). detalhes sobre o SVG embutido usado).

O primeiro passo é definir uma classe que possa reconhecer o navegador: esta é a razão pela qual eu usei os IFs do IE condicional no início do código. Esses IFs são usados ​​para anexar classes específicas à htmltag para reconhecer o navegador IE mais antigo.

Depois disso, todo selecto código HTML deve ser envolvido por uma div(ou qualquer marca que possa agrupar um elemento). Nesse invólucro, adicione a classe que contém a fonte do ícone.

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

Em palavras fáceis, esse wrapper é usado para simular a selecttag.

Para agir como um menu suspenso, o wrapper deve ter uma borda, porque ocultamos o que vem do select.

Observe que não podemos usar a selectborda porque temos que ocultar a seta padrão, aumentando-a em 25% a mais que o wrapper. Consequentemente, sua borda direita não deve ser visível, porque ocultamos esses 25% a mais pela overflow: hiddenregra aplicada a selectela mesma.

A seta personalizada icon-font é colocada na pseudo classe :beforeonde a regra contentcontém a referência para a seta (nesse caso, é um parêntese à direita).

Também colocamos essa seta em uma posição absoluta para centralizá-la o máximo possível (se você usar fontes de ícones diferentes, lembre-se de ajustá-las oportunamente, alterando os valores superior e esquerdo e o tamanho da fonte).

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

Você pode criar e substituir facilmente a seta do plano de fundo ou a seta da fonte do ícone, com todas as que desejar, simplesmente alterando-a na background-imageregra ou criando você mesmo um novo arquivo de fonte do ícone.

Caso você queira usar a classe e a pseudo-classe:

.simple-control é sua classe css

:disabled é pseudo classe

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}