9

Tenho uma tabela de preços, nela tem um select para a pessoa escolher o ciclo de pagamento como mostrado na imagem:

sendo que eu fiz com CSS:

-webkit-appearance:none; 
background:#E9E9E9 url("../imagens/bgs/seta.png") 95.5% 50% no-repeat;

Como mostra nessa imagem só funciona no Google Chrome:

gostaria de fazer igual da segunda imagem e que funcionasse em todos os navegadores, talvez tenha como fazer com JavaScript?

1 Resposta 1

7

Infelizmente ainda não é possível fazer isto da "maneira certa" em todos os browsers, uma vez que a propriedade appearance não é onipresente.

Suporte dos navegadores atuais: Browser Support

Por hora, é importantíssimo manter um fallback, mas você pode aumentar o suporte adicionando também o prefixo -moz.

-webkit-appearance: none;
-moz-appearance:    none;
appearance:         none;

Alguns desenvolvedores englobam a tag select dentro de uma div e a estilizam, como no exemplo:

<div class="select">
  <select>
    ...
  </select>
</div>
select {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  width: 100%;
}

.select {
  ...
  background: #e9e9e9 url('../imagens/bgs/seta.png') 95.5% 50% no-repeat;
  ...
}

Este método pode aumentar a compatibilidade, embora ainda não seja uma solução cross-browser.


Ou, utilize uma biblioteca JavaScript como a Select2.

2
  • Interessante, eu não conhecia isso. Mas pelo que vi na MDN, parece que essa propriedade foi cortada dos rascunhos da especificação, então dificilmente será cross-browser um dia.
    – bfavaretto
    1/05/2014 às 21:30
  • 1
    @bfavaretto: Você tem razão, esta especificação é conhecida como System Appearance e foi proposta no CSSS3-UI Candidate Recommendation em 11/05/2004, mas nunca saiu do papel. É bem improvável que a propriedade appearance esteja presente no CSS4-UI da maneira que conhecemos hoje, a realidade é que dez anos de se passaram, muitos componentes (principalmente formulários) foram adicionados no HTML5 e isso deixa clara a necessidade do reenquadramento e reexploração dos problemas que originalmente fora projetado para resolver. 1/05/2014 às 21:42

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 .