Css 自定义引导选择文本颜色

我很难改变我选择的颜色

HTML:

<div class="selectContainer">
  <select name="mySelect" class="form-control pickerSelectClass" id="id_mySelect"></select>
</div>  

$(document).ready(function() {  
  $(".pickerSelectClass").selectpicker();   

  $("#id_mySelect").html(
    '<option value="0">[Nothing selected]</option>'
    +'<option value="1">Option 1</option>'
    +'<option value="2">Option 2</option>'
  )
  $("#id_mySelect").selectpicker("refresh");
});

JS:

<div class="selectContainer">
  <select name="mySelect" class="form-control pickerSelectClass" id="id_mySelect"></select>
</div>  

$(document).ready(function() {  
  $(".pickerSelectClass").selectpicker();   

  $("#id_mySelect").html(
    '<option value="0">[Nothing selected]</option>'
    +'<option value="1">Option 1</option>'
    +'<option value="2">Option 2</option>'
  )
  $("#id_mySelect").selectpicker("refresh");
});

$（文档）.ready（函数（）{
$（“.pickerSelectClass”）.selectpicker（）；
$（“#id_mySelect”）.html(
“[未选择任何内容]”
+“选项1”
+“选项2”
)
$（“#id_mySelect”）.selectpicker（“刷新”）；
});

我想知道如何：

当选择菜单关闭时，是否更改第一个选项[未选择任何内容]的颜色

当“选择”菜单关闭时，如果选择了其他“选择”选项，是否更改颜色

打开“选择”菜单时更改选项的颜色

选择菜单打开时悬停选项是否更改颜色

打开整个选择菜单时是否更改其背景色

小提琴
//关闭“选择”菜单时，更改第一个选项[未选择任何内容]的颜色

$('.filter-option').css("color","red");

//event click a class is set on .pickerSelectClass but not yet 

$('.pickerSelectClass').click(function() {

  //menu option is open 
  if(!$(this).hasClass('open')) {
  //Change option's color when the select menu is opened
  //Change background color of the whole select menu when is opened
    $('.dropdown-menu a').css({
      'background':'none',
      'color': 'red'
      });
    //Change color when option on hover when select menu is opened
  $('.dropdown-menu a').hover(
  function() {
        $(this).css({
      'background':'none',
      'color': 'blue'
      });
  }, function() {
        $(this).css({
      'background':'none',
      'color': 'red'
      });
  }
);
  $('.dropdown-menu').css('background','green');
  //close
  }else {
  //color of button when option selected
       $('.filter-option').css("color","blue");
  }

  });

CSS唯一解决方案 下面是一个堆栈片段，它显示了如何更改所请求组件的颜色：

$（文档）.ready（函数（）{
$（“.pickerSelectClass”）.selectpicker（）；
$（“#id_mySelect”）.html(
“[未选择任何内容]”+
“选项1”+
“选项2”
)
$（“#id_mySelect”）.selectpicker（“刷新”）；
});
。选择容器{
宽度：200px
}
/* 1. 当选择菜单关闭时，是否更改第一个选项[未选择任何内容]的颜色*/
.bootstrap-select.btn-group.下拉切换[title=“[Nothing selected]”。筛选选项{
颜色：红色；
}
/* 2. 当“选择”菜单关闭时，如果选择了其他“选择”选项，是否更改颜色*/
.bootstrap-select.btn-group.dropdown-toggle.filter选项{
颜色：蓝色；
}
/* 3. 打开“选择”菜单时是否更改选项的颜色*/
.bootstrap-select.btn-group.下拉菜单>li>a{
颜色：绿色；
}
/* 4. 选择菜单打开时悬停选项是否更改颜色*/
.bootstrap-select.btn-group.下拉菜单>li>a:悬停：非（：焦点）{
颜色：橙色；
}
/* 5. 打开时是否更改整个选择菜单的背景色*/
.bootstrap-select.btn-group.下拉菜单{
背景颜色：黄色；
}

这是一个很好的答案！这就是我需要的！还有一个问题：您是否可以修改答案4（如果可以使用css），这样它就不会影响
a:focus
选项？（仅在未选择的选项上悬停）非常感谢您的帮助！我刚刚注意到，当select has
data live search=“true”
时，它不起作用：不（：focus）

知道如何修复它吗？（我主要没有实时搜索，但有一些选择是有的）@felixRo它看起来像是在

li

元素中添加了一个

selected

类，并删除了

：focus

伪类。因此，我在

li

中添加了一个

：not（.selected）

，以排除

selected

类。这应该可以处理这两种情况。检查这把小提琴：谢谢你的解释，因为我可以将我以前的

。下拉菜单>li>a:focus{background color:green}

更改为

。下拉菜单>li.selected>a{background color:green}

。现在一切似乎都很好。再次感谢你！