禁用所选选项时选择样式文本

Question

我有<select>几个我的HTML页面上<option>S; 某些选项被禁用(未禁用选择).我可以设置禁用选项的样式:

select option:disabled
{ 
    color: red;
}

但是,如果禁用,我还想设置所选项目的样式.用户无法进入此状态,但可以在此状态下提供页面.

如果禁用所选项目,如何设置选择样式？

Answer 1

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

<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>