自定义 bootstrap-select 文本颜色

Question

我很难更改 select 中的颜色。

HTML:

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

JS:

$(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");
});

我想知道如何：

当 select 菜单关闭时更改第一个选项的颜色 [Nothing selected]？
当 select 菜单关闭时，如果选择了其他 select 选项，颜色会改变吗？
打开 select 菜单时更改选项的颜色？
打开 select 菜单时悬停选项时更改颜色？
打开时更改整个 select 菜单的背景颜色？

Here is jsFiddle

Answer 1

here fiddle
//当select菜单关闭

时，改变第一个选项的颜色[Nothing selected]

$('.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");
  }

  });

Answer 2

CSS-唯一的解决方案

这是一个堆栈片段，展示了如何更改所请求组件的颜色：

$(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");
});

.selectContainer {
  width: 200px
}

/* 1. Change color of the first option [Nothing selected] when select menu is closed? */
.bootstrap-select.btn-group .dropdown-toggle[title="[Nothing selected]"] .filter-option {
  color: red;
}

/* 2. Change color when there are chosen other select options when select menu is closed? */
.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  color: blue;
}

/* 3. Change option's color when the select menu is opened? */
.bootstrap-select.btn-group .dropdown-menu>li>a {
  color: green;
}

/* 4. Change color when option on hover when select menu is opened? */
.bootstrap-select.btn-group .dropdown-menu>li>a:hover:not(:focus) {
  color: orange;
}

/* 5. Change background color of the whole select menu when is opened? */
.bootstrap-select.btn-group .dropdown-menu {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<div class="selectContainer">
  <select name="mySelect" class="form-control pickerSelectClass" id="id_mySelect"></select>
</div>

自定义 bootstrap-select 文本颜色

Customize bootstrap-select text colors

css

bootstrap-select

CSS-唯一的解决方案