Como ocultar a seta do menu suspenso SELECT no Firefox com “-moz-aparência: nenhum;”

fundo

Eu estava experimentando personalizar os <select>elementos de um formulário que estava construindo. Uma das coisas que tentei implementar foi truncar o texto com reticências para o caso de se estender além da <select>largura de. Não parecia consistente com os navegadores, mas acidentalmente descobri algo muito bom.

O inseto

Firefox <select> com appearanceatributo definido como none(Ubuntu):

Chrome <select> com appearanceatributo definido como none(Ubuntu):

Como este relatório de bug de 2011 afirma, há um problema em relação ao Firefox -moz-appearancee aos <select>elementos: ele deveria se livrar da <select>seta do (como a implementação do Chrome), mas simplesmente não o faz. As pessoas estavam em fúria sobre o assunto tudo sobre o internetz .

Até agora .

O conserto

Aqui está a solução alternativa inteligente para fazer funcionar:

1. Defina -moz-appearancecomo none. Isso “redefinirá” o estilo do elemento;
2. Defina text-indentcomo 0.01px. Isso “empurrará” o texto um pouco ^[1] para a direita;
3. Defina como (uma string vazia). Isso mudará qualquer coisa que se estenda além da largura do elemento para … nada – e isso inclui a infame seta !text-overflow''

Voilà! Uma seleção selvagem aparece!

Exemplo vivo

http://codepen.io/joaocunha/pen/qLgCG

_{(apenas Firefox, duh)}

Considerações finais

• O Firefox não remove a seta, ele a esconde . Você terá algum espaço em branco à direita ^[2] (mesma largura da seta agora oculta);
• O Chrome remove a seta por padrão com em vez de ocultar. Nenhum espaço em branco à direita;-webkit-appearance:none;
• O Chrome não suporta otext-overflow:'' . Nenhum texto cortado uniformemente;
• Sua melhor aposta é definir alguns para fornecer o espaço certo para sua versão estilizada da seta. Lembre-se de que o Firefox levará em consideração a largura da seta fantasma;padding-right
• Acontece que o Windows não exigem a declaração em tudo. Testado em 8;-moz-appearance: none;
• O Firefox para Android precisa de toda widtha seta como . Isso significa que você precisa defini-lo para pelo menos , mas tome cuidado, pois o Firefox parece dobrar o valor dos elementos .text-indent5pxtext-indent<select>

E é como hacky fácil assim!

Testado em Ubuntu , Windows 8 e Mac , todos com versões recentes (pelo menos 20.xx).

Siga me no twitter: @joaocunha

_{^[1] Obrigado a Binyamin por melhorá-lo de 1px para 0,01px.}

_{^[2] Agradecimentos a RussellUresti por notar o espaço em branco.}