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

When :has is supported in browsers you could use < > I believe it would work :

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

However, so far no browser supports and perhaps this does not even go out of print.

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

  

/! \ This is a gambiarra!

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

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

So this answers the question of "I want the select to remain with the red color after selecting an option, even if it loses focus later.", but the use of 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>

A very simple jQuery script solves!

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

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

See working at jsfiddle

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

           });

Just change the color of select to:

select {
    color: gray;
}

FOR

select {
    color: red;
}