5

Tenho um select e estou tentando mudar a cor do mesmo ao selecionar uma opção (para o exemplo estou mudando a cor para red). Usando alguns atributos como hover, focus, active e checked eu até consigo fazer o que eu quero. O problema é que quando o select perde o focus ele retorna a sua cor original.

Quero que o select permaneça com a cor cinza enquanto não for selecionado e após selecionado que a cor red seja aplicada. Mesmo que ele perca o foco depois.

select {
  color: gray;
}

select:hover,
select:focus,
select:active,
select:checked {
  color: red;
}

select option {
  color: #333;
}

option[value=""][disabled] {
  display: none;
}
<select id="estado" name="estado">
			<option value="" disabled selected>Selecione</option>
            <option value="AC">AC</option>
            <option value="AL">AL</option>
            <option value="AM">AM</option>
            <option value="AP">AP</option>
            <option value="BA">BA</option>
            <option value="CE">CE</option>
            <option value="DF">DF</option>
            <option value="ES">ES</option>
            <option value="GO">GO</option>
            <option value="MA">MA</option>
            <option value="MG">MG</option>
            <option value="MS">MS</option>
            <option value="MT">MT</option>
            <option value="PA">PA</option>
            <option value="PB">PB</option>
            <option value="PE">PE</option>
            <option value="PI">PI</option>
            <option value="PR">PR</option>
            <option value="RJ">RJ</option>
            <option value="RN">RN</option>
            <option value="RO">RO</option>
            <option value="RR">RR</option>
            <option value="RS">RS</option>
            <option value="SP">SP</option>
            <option value="SC">SC</option>
            <option value="SE">SE</option>
            <option value="TO">TO</option>
</select>

2
  • Nunca vi um método por css não cara. Já pensou em usar js? Commented 24/01/2017 às 13:19
  • Oi @LeonardoRodrigues! com js seria fácil! mas aqui só usamos para deixar a pagina dinânica ou para animações mais complexas! de resto toda a estilização fazemos usando apenas css e sass.
    – alan
    Commented 24/01/2017 às 15:19

4 Respostas 4

5

Quando o :has for suportado nos navegadores poderia utilizar, acredito que iria funcionar:

select:has(option[value=""]) {
  color: red;
}

Entretanto, até o momento nenhum navegador suporta e talvez isto nem saia do papel.


Uma opção seria criar uma longa transação/animação, assim prevenindo que a cor volte para o estado normal.

/!\ Isso é uma gambiarra!

Dessa forma o select irá demorar 2147483647 segundos para voltar ao estado normal, que é gray, isso funciona usando o transition: color 0s 2147483647s;.

Enquanto isso quando houver o hover, por exemplo, a cor seria modificada imediatamente, graças ao transition:0s;.

Então isso atende a pergunta de "Quero que o select permaneça com a cor red após a seleção de uma opção. Mesmo que ele perca o foco depois.", mas o uso de JQuery, como já foi respondido, seria o ideal.

select {
  color: gray;
  transition: color 0s 2147483647s;
}

select:hover,
select:focus,
select:active,
select:focus {
  color: red;
  transition:0s;
}

select option {
  color: #333;
}

option[value=""][disabled] {
  display: none;
}
<select id="estado" name="estado">
   <option value="" disabled selected>Selecione</option>
   <option value="A">A</option>
   <option value="B">B</option>
</select>

2
  • +1 só pelo aviso de atenção isso é uma gambiarra Commented 24/01/2017 às 13:54
  • Poxa @Inkeliz! As vezes e somente as vezes precisamos recorrer a ganbiarras para resolver um problema ou outro! kkk! Mas a sua solução me serviu muito bem! o importante é q irá funcionar da forma esperada! valeu! :)
    – alan
    Commented 24/01/2017 às 15:09
5

Um script jQuery bem simples resolve!

O que precisa fazer é mudar o css quando o elemento é selecionado.

$('#estado').change(function(){
    $(this).css('color', 'red');
});

Veja funcionando no jsfiddle

1
  • Obrigado pela ajuda @Amanda Lima! Mas aqui a parti de estilização trabalhamos apenas com css e sass. Usamos o javascript e jQuery apenas para animações mais complexa. De qualquer forma valeu! ;)
    – alan
    Commented 24/01/2017 às 15:07
2
        <select id="estado" class="color_gray" name="estado">
        <option value="" disabled selected>Selecione</option>
        <option value="AC">AC</option>
        <option value="AL">AL</option>
        <option value="AM">AM</option>
        <option value="AP">AP</option>
        <option value="BA">BA</option>
        <option value="CE">CE</option>
        <option value="DF">DF</option>
        <option value="ES">ES</option>
        <option value="GO">GO</option>
        <option value="MA">MA</option>
        <option value="MG">MG</option>
        <option value="MS">MS</option>
        <option value="MT">MT</option>
        <option value="PA">PA</option>
        <option value="PB">PB</option>
        <option value="PE">PE</option>
        <option value="PI">PI</option>
        <option value="PR">PR</option>
        <option value="RJ">RJ</option>
        <option value="RN">RN</option>
        <option value="RO">RO</option>
        <option value="RR">RR</option>
        <option value="RS">RS</option>
        <option value="SP">SP</option>
        <option value="SC">SC</option>
        <option value="SE">SE</option>
        <option value="TO">TO</option>
        </select>

css .color_red { color: red; } .color_gray { color: gray; }

Js

       $( "select" )
        .change(function () {

            var $SL = $('#estado');
            $SL.addClass('color_red');
            $SL.removeClass('color_gray');

           });
1

Apenas troque a cor do select em:

select {
    color: gray;
}

PARA

select {
    color: red;
}
4
  • Acho que ele deseja que a cor se mantenha gray até que o usuário modifique, tirando da opção padrão.
    – Inkeliz
    Commented 24/01/2017 às 13:13
  • @Inkeliz "Quero que o select permaneça com a cor red após a seleção de uma opção. Mesmo que ele perca o foco depois."
    – RFL
    Commented 24/01/2017 às 15:06
  • Dessa forma que apresentou ele terá a cor red mesmo antes de perder o foco, não somente durante e depois.
    – Inkeliz
    Commented 24/01/2017 às 15:10
  • é isso mesmo @Inkeliz! o select inicia com a cor gray e só muda para red após uma seleção! a solução do @Inkeliz me serviu muito bem! :
    – alan
    Commented 24/01/2017 às 15:10

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 .