How to change the color of a select when selecting an option

Question

I have a select and I’m trying to change the color of it by selecting an option (for example I’m changing the color to red). Using some attributes like hover, focus, active and checked i can even do what I want. The problem is that when select loses Focus it returns its original color.

I want the select to remain gray until it is selected and after the selected color red be applied. Even if he loses focus after.

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>

Answer 1

A very simple jQuery script solves!

What you need to do is change the css when the element is selected.

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

See working on jsfiddle

Answer 2

When the :has supported in browsers could use, I believe it would work:

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

However, so far no browser supports and maybe it won’t even come off the paper.

---

One option would be to create a long transaction/animation, thus preventing the color to return to normal state.

/!\ This is a gambit!

Thus the select it will take 2147483647 seconds to return to normal, which is gray, this works using the transition: color 0s 2147483647s;.

Meanwhile when there’s the hover, for example, the color would be changed immediately, thanks to the transition:0s;.

So this answers the question of "I want the select to remain red after selecting an option. Even if it loses focus afterwards.", but using Jquery, as already answered, would be 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>

Answer 3

        <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');

           });

Answer 4

Just change the color of select in:

select {
    color: gray;
}

FOR

select {
    color: red;
}