0

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

nacho4d
  • 43,720
  • 45
  • 157
  • 240

3 Answers3

0

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

source: Disabled input text color

Community
  • 1
  • 1
Arun
  • 517
  • 1
  • 6
  • 23
0

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;
}
HGMamaci
  • 1,339
  • 12
  • 20
-1
$(selectObject)
    .attr('disabled', 'disabled')
    .css({
        "color":"red",
        "background-color":"white",
        "border-style":"solid"
    });
user3409916
  • 70
  • 1