'How to change disabled option text color in the pull down list?

How can I change the font color of a disabled option in a select menu? (Not the select itself, just its options in the pull down menu) I want to do this because in chrome/safari there is almost no difference between disabled/enabled options (See first picture). In IE the difference is somehow obvious. In Firefox it quite obvious.

Below approach only works in FF. How can I do this in a cross-browser manner? https://jsfiddle.net/6wazms1a/3/

HTML:

<select>
    <!-- I want to change text color of 'disabled' in the pull down list. 
Reason: Make non-disabled options more prominent (like in IE and Firefox) -->
    <option disabled>disabled</option> 
    <option selected>enabled selected</option>
    <option>other enabled</option>   
    <option>another enabled</option>
</select>

CSS:

option:disabled,
option[disabled],
option[disabled="disabled"] { color: #ccc; }

So far my results:

Chrome/Safari

Bad. There is almost no difference between enabled/disabled options. I can hardly tell what is enabled and what is not.

Firefox and IE (OK)

Good. Very easy to spot disabled options

htmlcss


Solution 1:[1]

see whether this works : -webkit-text-fill-color:blue;

source: Disabled input text color

Solution 2:[2]

To set via Jquery all options

$("option:disabled").css("color","gray");

or even more detailed via css

option:disabled {
color: gray;
text-align: right;
font-style: italic;
font-size: smaller;
}

Solution 3:[3]

$(selectObject)
    .attr('disabled', 'disabled')
    .css({
        "color":"red",
        "background-color":"white",
        "border-style":"solid"
    });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2
Solution 3 user3409916

Related Questions