Aqui estão três soluções:
Solução # 1 - aparência: nenhuma - com solução alternativa para o Internet Explorer 10 - 11 ( demonstração )
-
Para ocultar a seta padrão definida appearance: none
no elemento de seleção, adicione sua própria seta personalizada combackground-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Suporte do navegador:
appearance: none
tem um suporte muito bom ao navegador ( caniuse ) - exceto o Internet Explorer 11 (e posterior) e Firefox 34 (e posterior).
Podemos melhorar essa técnica e adicionar suporte ao Internet Explorer 10 e Internet Explorer 11 adicionando
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Se o Internet Explorer 9 for uma preocupação, não temos como remover a seta padrão (o que significaria que agora teríamos duas setas), mas poderíamos usar um seletor do Internet Explorer 9.
Para desfazer pelo menos nossa seta personalizada - deixando a seta de seleção padrão intacta.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Todos juntos:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
Essa solução é fácil e possui um bom suporte ao navegador - geralmente deve ser suficiente.
Se o suporte ao navegador do Internet Explorer 9 (e posterior) e Firefox 34 (e posterior) for necessário, continue lendo ...
Solução # 2 Trunque o elemento de seleção para ocultar a seta padrão ( demo )
-
(Leia mais aqui)
Enrole o select
elemento em uma div com uma largura fixa e overflow:hidden
.
Em seguida, dê ao select
elemento uma largura de cerca de 20 pixels maior que a div .
O resultado é que a seta suspensa padrão do select
elemento ficará oculta (devido ao overflow:hidden
contêiner) e você pode colocar qualquer imagem de plano de fundo desejada no lado direito da div.
A vantagem dessa abordagem é que ela é entre navegadores (Internet Explorer 8 e posterior, WebKit e Gecko ). No entanto, a desvantagem dessa abordagem é que o menu suspenso de opções se projeta no lado direito (pelos 20 pixels que ocultamos ... porque os elementos de opção assumem a largura do elemento de seleção).
[No entanto, deve ser observado que, se o elemento de seleção personalizado for necessário apenas para dispositivos móveis - o problema acima não se aplica - devido à maneira como cada telefone abre nativamente o elemento de seleção. Portanto, para dispositivos móveis, essa pode ser a melhor solução.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}
<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
Se a seta personalizada for necessária no Firefox - anterior à versão 35 - mas você não precisar oferecer suporte a versões antigas do Internet Explorer - continue lendo ...
Solução # 3 - Use a pointer-events
propriedade ( demo )
-
(Leia mais aqui)
A idéia aqui é sobrepor um elemento sobre a seta suspensa nativa (para criar uma personalizada) e, em seguida, não permitir eventos de ponteiro nele.
Vantagem: Funciona bem no WebKit e Gecko. Parece bom também (sem option
elementos salientes ).
Desvantagem: o Internet Explorer (Internet Explorer 10 e inferior) não suporta pointer-events
, o que significa que você não pode clicar na seta personalizada. Além disso, outra desvantagem (óbvia) desse método é que você não pode segmentar sua nova imagem de seta com um efeito de foco ou cursor de mão, porque acabamos de desativar os eventos de ponteiro neles!
No entanto, com esse método, você pode usar o Modernizer ou comentários condicionais para fazer o Internet Explorer reverter para a seta incorporada padrão.
NB: Como o Internet Explorer 10 não suporta conditional comments
mais: se você deseja usar essa abordagem, provavelmente deve usar o Modernizr . No entanto, ainda é possível excluir o CSS de eventos do ponteiro do Internet Explorer 10 com um hack de CSS descrito aqui .
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->