2

Tenho o seguinte código HTML que marca um SELECT:

<select name="filtro">
  <option value="">Mais visualizados</option>
  <option value="">Menos visualizados</option>
  <option value="">Mais Recentes</option>
</select>

Dá este resultado no Chrome:

inserir a descrição da imagem aqui

Detalhe ele só aplica o código CSS para o OPTION que carrega junto com a pagina. Os seguintes ele não estiliza com o mesmo font-weight, isto no Chrome. Segue o CSS:

.filtro select{
  font-family: Lato, Calibri, Arial, sans-serif;
  font-weight: 300;
  clear: both;
  border-radius: 3px;
  padding: 5px;
  font-size: 14px;
  position: relative;
  left: 650px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

Já no Firefox ele apresenta isto:

inserir a descrição da imagem aqui

Com a propriedade appearance tento tirar a aparência da engine que está sendo usado no momento. Porém, isto só funcionou no Chrome. Já no Firefox ele aplica essa seta para baixo.

Alguém já passou por isso? Alguma solução?

2
  • 3
    Estilização de <select> e <option> varia mesmo de acordo com o navegador. A única solução garantida é criar seu próprio simulacro de select, usando divs, css e js (e de preferência usando um select oculto como fallback, garantindo acessibilidade, etc.)
    – bfavaretto
    Commented 13/08/2014 às 20:10
  • 1
    Eu desisti de estilizar <select> e <option>, quando preciso de algo, procuro algum plugin. Fiz uma pergunta parecida aqui pt.stackoverflow.com/questions/9487/… Commented 13/08/2014 às 20:11

1 Resposta 1

1

Olá,

Tenta ver se acha algo legal que sirva pra seus requisitos de suporte a navegadores.

Alguns experimentos legais com select também, só precisa checar o suporte aos navegadores:

Espero ter ajudado... =)

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 .