Estou quebrando a cabeça para tentar fazer com que o select do meu site fique de acordo com meu css. Na verdade, apenas no Mozilla que o dito cujo não fica com a aparência desejada.
Fui em busca de algum jQuery que faça edição desses elementos, mas o problema é que no meu site terão 2 selects de aparência diferentes, ou seja, se eu usar um jQuery pronto ele vai deixar ambos os selects com a mesma aparência. Para isso, terei que usar 2 jQuerys, o que eu não quero e acho que ficará pesado.
Não existe algum comando jquery que elimine a "setinha" do select? Só ela que está estragando a aparência no Mozilla.
Tentei criar uma div com overflow "hidden" e deixar o select maior em largura, assim esconderia a seta, mas a largura dos <option>
também alarga. Também tentei editar o tamanho do <option>
mas não aceita esse tipo de personalização.
Código demonstrativo:
<select>
<option>um</option>
<option>dois</option>
</select>
select {
-webkit-appearance:none;
-moz-appearance:none;
-o-appearance:none;
appearance:none;
text-indent: 0.01px;
background: transparent;
width:185px;
height:22px;
font-size:18px;
border:0;
color:#CC9;
outline: none
}
option {
font-size:13px;
border:0;
background-color:#1063A0;
outline: none;
width:100px; /* queria editar a largura do option tbm */
}
Visualização: http://jsfiddle.net/n56o2k2j/