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>
css
não cara. Já pensou em usarjs
?