如果使用js不是问题
您可以在load事件页面上执行以下操作：

var elem = document.getElementById('idOfYourSelect');
  var selectedOption= elem[elem.selectedIndex];
  if(selectedOption.disabled == true){
   elem.style.color='red'; // apply the styles
}

并在选择它时将其更改回正常（如果您愿意）

elem.onclick= function(){
elem.style.color='initial'; // revert back to normal style
}

检查此fiddle

这个选项使用了selected属性，它也使用了jQuery。这里有一个小提琴来展示一个例子：JsFiddle

HTML

<select>
    <option>test1</option>
    <option selected disabled>test2</option>
    <option>test3</option>
    <option>test4</option>
</select>

jQuery（onLoad）

$('select > option:selected:disabled').each(function(){
    $(this).parent().css("color","red");
});

$('select').change(function(){
    $(this).css("color", "black");
});

CSS

/*reset color for options*/
select option:not(:disabled) {color:black;}

我建议你在select中添加一个类，并在CSS中设置它的样式。然后，当用户将选择更改为有效时，您将删除该类。

示例

下面是一个使用jQuery的简单实现：

HTML

<select>
    <option>test1</option>
    <option selected disabled>test2</option>
    <option>test3</option>
    <option>test4</option>
</select>

jQuery（onLoad）

$('select > option:selected:disabled').each(function() {
    var select = this.parentNode;
    select.classList.add("select-with-disabled-selected-option");
    $(select).change(function() {
        this.classList.remove("select-with-disabled-selected-option");
    });
});

CSS

.select-with-disabled-selected-option {
    color: red;
}

你可能不需要jQuery

我使用jQuery使它更简单。
但是http://youmightnotneedjquery.com/

谢谢大家。这就是我最终所做的，在许多答案和评论的帮助下。

<script type="text/html" id="fkeyByName-template">
  <select data-bind="optionsCaption: 'Choose...',
             optionsText:  function(item){ return item.value.name;},
             optionsValue: function(item){ return item.id;},
             valueAllowUnset: true, 
             options: (function(){return $root.foreignKeys.values(col.ftype);})(),
             value: value,
             optionsAfterRender:function(option,item){
               $root.setOptionDisable(option,item,value,$element,$data);
             }
             ">
  </select>
  {{! <p data-bind="text: value"></p> }}
</script>

<script type="text/javascript">
  model.setOptionDisable = function (option, item, value, select, data) {
    if (item) {
      ko.applyBindingsToNode(option, {disable: item.value.removed}, item);
      if (value() == item.id) {
        ko.applyBindingsToNode( select,{css: {disabledSelected: item.value.removed}}, data); 
      }
      select.onchange = function() { 
        ko.applyBindingsToNode( select,{css: {disabledSelected: false}}, data); 
      };
    } 
  }
</script>

<style>
select option:disabled, select.disabledSelected
{ 
  color: red;
} 

/*reset color for options*/
select option:not(:disabled) 
{
  color:initial;
}
</style>

它可以用jquery。
假设你有这个：

<select class="sel">
   <option disabled="true">one</option>
   <option>two</option>
   <option disabled="true">three</option>
   <option>four</option>
</select>

onload函数你可以这样写：

$('.sel option[disabled="true"]').each(function () {
    $(this).attr('style', 'color:red');
});

Selectors Level 4草案介绍了Selector的Subject，它允许您使用

!select option:disabled
{ 
  color: red;
}

但是浏览器还不支持它。

有一个纯CSS解决方案，CSS :has()选择器现在广泛应用于Web浏览器。

select option {
  color: black;
}
select option:disabled {
  color: grey;
}
select:has(option:checked:disabled) {
  color: red;
}

<select>
  <option value="1">apples</option>
  <option value="2">oranges</option>
  <option value="3" disabled selected>bananas</option>
</select>