7

Tenho o seguinte select.

inserir a descrição da imagem aqui

É possível trocar a cor azul dele para uma que eu queira aplicar, vermelho por exemplo?

1 Resposta 1

8

Elementos SELECT são renderizados pelo sistema operacional, não HTML. Você não pode mudar essa cor azul, porque ela é padrão do SO.

"A alternativa é usar bibliotecas que customizam o select, geralmente transformado-os em dropdowns e outros (Exemplo: bootstrap select - silviomoreto.github.io/bootstrap-select)."

Mas voce pode mudar algumas coisas sem usar dropdowns:

var select = document.getElementById('mySelect');
select.onchange = function () {
    select.className = this.options[this.selectedIndex].className;
}
.redText {
    background-color:#F00;
}
.greenText {
    background-color:#0F0;
}
.blueText {
    background-color:#00F;
}
<select id="mySelect" class="greenText">
    <option class="greenText" value="apple" >Apple</option>
    <option class="redText"   value="banana" >Banana</option>
    <option class="blueText" value="grape" >Grape</option>
</select>

5
  • A alternativa é usar bibliotecas que customizam o select, geralmente transformado-os em dropdowns e outros (Exemplo: bootstrap select - silviomoreto.github.io/bootstrap-select). Commented 7/05/2015 às 18:45
  • Eric, dá uma olhada no exemplo que eu coloquei, e veja algumas das mudanças que voce pode fazer. Commented 7/05/2015 às 18:46
  • Mas, perceba que o AZUL continua, porque ele é padrão do Sistema Operacional. Commented 7/05/2015 às 18:46
  • 1
    Entendi, Paulo. Obrigado pelo esclarecimento.
    – Eric
    Commented 7/05/2015 às 18:53
  • E obrigado, Eduardo, pela sugestão.
    – Eric
    Commented 7/05/2015 às 18:53

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 .