4

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/

3
  • Interessante: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
    – brasofilo
    26/08/2014 às 13:24
  • Eu consegui mudar para o Chrome: pt.stackoverflow.com/questions/7651/… que era minha necessidade, você pode tentar fazer como eu fiz mas usando os atributos especificos do Firefox.
    – Joao Paulo
    26/08/2014 às 20:19
  • Pelo que andei lendo, o Mozilla permitia alterar a aparência do select, mas em uma atualização ele acabou "bugando" e não permitindo mais. :\
    – Ricardo
    27/08/2014 às 11:58

3 Respostas 3

2

Olá, deixe seu código como está, infelizmente isto é um bug do novo mozilla 30+

Olhe

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

https://wiki.mozilla.org/B2G/Schedule_Roadmap

Mas para felicidade de todos eles já estão sabendo disso, é só esperar a próxima atualização

1
  • Sim.. infelizmente.
    – Ricardo
    27/08/2014 às 11:59
0

Uma alternativa para remover a "setinha" é utilizar o datalist com um input utilizando o atributo list.

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Referência.

1
  • 1
    Fiz um teste rápido no fiddle e a setinha não aparece no FF mas aparece no Chrome. E dá um problema de ter que fazer foco primeiro e clicar de novo pra poder aparecer o dropdown...
    – brasofilo
    26/08/2014 às 20:59
0

Depois de ler as sugestões de vocês e ler mais sobre este caso pelo Google, eu resolvi criar uma "gambiarra", que até o momento está dando certo.

O <select> está dentro de uma div, e esta div está com uma width fixa e um overflow:hidden. No <select> eu deixei com uma largura maior que a div, e como ela está com hidden, a seta irá sumir.

Exemplo: http://jsfiddle.net/tmty4gr9/ (rode no Chrome e no Mozilla)

O único problema é que a largura das <option> também irá ser do tamanho do <select>.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .