在bootstrap中更改selectpicker选项的data-icon颜色

Question

我正在使用bootstrap Selectpicker，我想在select中更改选项的数据图标的颜色。每个数据图标都有特定的颜色，我必须使用内部CSS才能帮助我，我该怎么办呢？

<select class="bs-select selectpicker form-control" data-show-subtext="true" multiple>
    <option data-icon="fa fa-circle">Mustard</option>
    <option data-icon="fa fa-circle">Ketchup</option>
    <option data-icon="fa fa-circle">Relish</option>
    <option data-icon="fa fa-circle">Mayonnaise</option>
    <option data-icon="fa fa-circle">Barbecue Sauce</option>
</select>

Answer 1

来自Custom content

我使用<option data-content="<i class='fa fa-circle red'></i> Mustard">Mustard</option>作为选项来选择

请参阅data-content="<i class='fa fa-circle red'></i> Mustard"添加了一个类red，它改变了数据图标的颜色而不是选项文本

$(window).on('load', function() {
  $('select').selectpicker();

}); //]]>

.green {
  color: green !important
}

.yellow {
  color: yellow !important
}

.white {
  color: white !important
}

.blue {
  color: blue !important
}

.red {
  color: red !important
}

.bootstrap-select.btn-group:not(.input-group-btn),
.bootstrap-select.btn-group[class*="span"] {
  margin: 0 !important;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script>

<select class="bs-select selectpicker form-control" data-show-subtext="true" multiple>
    <option data-content="<i class='fa fa-circle red'></i> Mustard">Mustard</option>
    <option data-content="<i class='fa fa-circle blue'></i> Ketchup">Ketchup</option>
    <option data-content="<i class='fa fa-circle green'></i> Relish">Relish</option>
    <option data-content="<i class='fa fa-circle yellow'></i> Mayonnaise">Mayonnaise</option>
    <option data-content="<i class='fa fa-circle white'></i> Barbecue Sauce">Barbecue Sauce</option>
</select>

Answer 2

如果我理解你的问题，只需添加一些颜色类，然后设置样式：

<select class="bs-select selectpicker form-control" data-show-subtext="true" multiple>
    <option data-icon="fa fa-circle" class="red">Mustard</option>
    <option data-icon="fa fa-circle" class="blue">Ketchup</option>
    <option data-icon="fa fa-circle" class="green">Relish</option>
    <option data-icon="fa fa-circle" class="yellow">Mayonnaise</option>
    <option data-icon="fa fa-circle" class="white">Barbecue Sauce</option>
</select>

CSS

.red {color: red};
.blue {color: blue};
.green {color: green};
.yellow {color: yellow};
.white {color: white};