Como remover o ícone de seta padrão de uma lista suspensa (selecionar elemento)?

297

Quero remover a seta suspensa de um <select>elemento HTML . Por exemplo:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

Como fazer isso no Opera, Firefox e Internet Explorer?

insira a descrição da imagem aqui

user2301515
fonte
Algumas respostas / hacks para escondê-lo no Firefox - stackoverflow.com/questions/5912791/…
andyb
2
aparência #slectType { -webkit-appearance: none; appearance: none /*menulist*/ !; max-width: 300px; line-height: 0px;} input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;} Navegações importantes [CH: -webkit, FF: -moz, IE: -ms, Oprea: -o];
Yash
1
Possível duplicata da seta Remover Select no IE
Muath
Possível duplicata de ocultar HTML Selecione a seta suspensa com CSS
Damjan Pavlica 15/10

Respostas:

383

Não há necessidade de hacks ou estouro. Há um pseudo-elemento para a seta suspensa no IE:

select::-ms-expand {
    display: none;
}
nrutas
fonte
22
porque a questão era como remover a seta suspensa no IE. O IE9 não possui essa funcionalidade, mas isso funciona no IE10. portanto, a menos que você esteja usando o Windows XP, você deve usar o IE10 de qualquer maneira. O IE11 está quase esgotado. outra opção é um truque feio de CSS para ocultar o botão suspenso real e criar o seu próprio.
Nrutas 29/10
2
ligação aqui está o corte feio para esconder o estouro
nrutas
1
Trabalha no IE11. Gracias!
ConorLuddy
Isso não funcionou no Firefox. Use a solução de Varun Rathore abaixo para o Firefox.
22617 AlmostPitt
1
isso é apenas para o IE. claro que não vai funcionar no Firefox.
Nrutas 27/03
289

As soluções mencionadas anteriormente funcionam bem com o chrome, mas não no Firefox.

Encontrei uma solução que funciona bem no Chrome e no Firefox (não no IE). Adicione os seguintes atributos ao CSS para o seu SELECTelement e ajuste a margem superior para atender às suas necessidades.

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

Espero que isto ajude :)

Varun Rathore
fonte
9
Esse truque parou de funcionar no Firefox a partir da versão 31 (na compilação Nightly a partir de maio de 2014). Vamos ver o que pode ser feito enquanto isso. Esta essência que escrevi tem toda a descrição
João Cunha
O método de João Cunha foi verificado e utilizado com sucesso. Quando você fizer o check-out, não esqueça de abrir o link no firefox!
NoobishPro
Funcionou para mim. Eu queria usá-lo para o wkhtmltopdf para gerar pdf a partir de html. Obrigado
Faisal
187

Maneira simples de remover a seta suspensa de selecionar

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}
<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

Sangeet Shah
fonte
4
Acabei de usar o appearance: noneChrome e o Firefox Quantum (v59 e superior). Ou seja, não precisa mais de prefixos de fornecedores .
CPHPython
2
@CPHPython A maioria dos navegadores como deste comentário ainda têm um "apoio parcial com prefixo" tag sobre eles ...
Dan
2
@CPHPython, você precisa ter o Autoprefixer instalado no seu projeto para que o sem prefixo appearance: nonefuncione. A maioria dos navegadores ainda precisa dos prefixos.
precisa
@ DanielTonon oh, talvez eu estivesse usando algum pacote postcss como esse. Não me lembro exatamente, mas acho que verifiquei o inspetor do navegador antes de comentar.
CPHPython
58

Tente o seguinte:

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS Bin: http://jsbin.com/aniyu4/2/edit

Se você usa o Internet Explorer:

select {
    overflow:hidden;
    width: 120%;
}

Ou você pode usar o Choosen: http://harvesthq.github.io/chosen/

EpokK
fonte
1
Você testou seu JSBin no IE e no firefox? Ainda vejo a seta suspensa integrada em ambos.
Martin Smith
Verifique com Choosen, acho que é a melhor escolha.
EpokK 21/05
"Se você usa o Internet Explorer"? Você precisa considerar o grande% da população que fazem uso IE e atender a eles, independentemente
Danny Mahoney
Nossas estatísticas locais dos utilizadores são os seguintes: 5,21% IE ou 2,37% Borda
nu Everest
"Se você usa o IE" seria correto, seria mais adequado dizer "Se você precisar dar suporte ao IE", mas atualmente, sua tecnologia deve ser direcionada adequadamente ao seu público, se você estiver executando uma web site direcionado ao desenvolvedor, duvido que você precise oferecer suporte a QUALQUER versão do IE.
Brandito
17

Tente isto:

HTML:

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS:

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}
Kalyan, Luke Sarata, Brata
fonte
15

Tente isso, funciona para mim,

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

Você não pode se esconder, mas usando o estouro oculto, você pode realmente fazê-lo desaparecer.

Mahesh Shitole
fonte
6

Só queria concluir o tópico. Para ficar bem claro, isso não funciona no IE9, no entanto, podemos fazê-lo com um pequeno truque de css.

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}
sun2
fonte
5

Como eu respondi na seta Remover seleção no IE

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;
}
Tejasvi Hegde
fonte
4
select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}

Mitul
fonte
2

Você não pode fazer isso com um suporte a vários navegadores totalmente funcional.

Tente usar uma div de 50 pixels, suponha e flutue no ícone suspenso desejado de sua escolha, à direita desta

Agora, dentro dessa div, adicione a tag select com uma largura de 55 pixels, talvez (algo além da largura do contêiner)

Eu acho que você conseguirá o que deseja.

Caso você não queira nenhum ícone de gota à direita, siga todas as etapas, exceto para flutuar a imagem à direita. Definir contorno: 0 em foco para a tag de seleção. é isso aí

Kaustav Banerjee
fonte
1
Não posso obter ajuda com essas dicas. Alguém pode dar código adequado aqui? Obrigado.
User2301515
2

existe uma biblioteca chamada DropKick.js que substitui os menus suspensos de seleção normais por HTML / CSS, para que você possa estilizá-los e controlá-los completamente com javascript. http://dropkickjs.com/

nrutas
fonte
2

Funciona para todos os navegadores e todas as versões:

JS

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

HTML

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>
SK.
fonte