仅CSS解决方案

Question

我很难改变我的选择中的颜色。

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

我想知道如何：

当选择菜单关闭时，更改第一个选项[没有选择]的颜色？
当选择菜单关闭时，如果选择了其他选择选项，是否更改颜色？
打开选择菜单时更改选项的颜色？
打开选择菜单时，当悬停选项时更改颜色？
打开时更改整个选择菜单的背景颜色？

Here is jsFiddle

Answer 1

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

Answer 2

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

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

  });

自定义bootstrap-select文本颜色

2 个答案:

仅CSS解决方案