html - 禁用所选选项时选择的样式文本

Question

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

select option:disabled
{ 
    color: red;
}

但是，如果它被禁用，我还想设置所选元素的样式。用户不可能到达此状态，但可以在此状态下提供页面。

如果选择的元素被禁用，我如何设置选择的样式？

Answer 1

如果用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