Question

我想更改Bootstrap-select下拉框的占位符/标题颜色。现在它看起来像黑色，我希望它是一个深灰色。

我尝试将此添加到我的CSS

span.filter-option.pull-left {
    color: darkgrey;
}

After，效果很好。但这也使选项变成深灰色而不是黑色。 See here. 我只想将占位符的颜色更改为深灰色而不是所有选项。我怎样才能做到最好？感谢。

HTML：

<select name="box" class="selectpicker form-control">
  <option value="">Select</option>
  <option value="option1"> Option 1 </option>
</select>

编辑：

由于某种原因，纯CSS样式似乎对我不起作用。我尝试过使用Bootstrap-select的原生 title 属性，但它并没有像文档中显示的那样灰显。我是否有Javascript / JQuery方式来改变 span.filter-option.pull-left 的颜色，具体取决于它是“选择”还是“选项1”？

PS。这是Chrome检查器工具向我显示的Select 对于Option 1，除了这两个之外别无选择。

Answer 1

手头的主要问题是插件（bootstrap-select）确实没有固定的方法来执行此操作。如果您只是使用multiple上的单一选择（非select属性），则可以依赖于在选择值时添加的bs-placeholder类，如果你正在使用LESS）使用@input-color-placeholder变量来设置颜色：

.bootstrap-select {
  ...

  // The selectpicker button
  > .dropdown-toggle {
    ...

    &.bs-placeholder,
    &.bs-placeholder:hover,
    &.bs-placeholder:focus,
    &.bs-placeholder:active { color: @input-color-placeholder; }
  }
  ... 
}

唯一的问题是，如果该插件是多重选择，则该插件不会添加该类，因此您必须获得一点创意才能确定是否选择了某个值。不幸的是，我默认发现的唯一DOM属性操作是标题更改.dropdown-toggle。如果您不介意将初始title属性硬编码到CSS中，则可以添加一个更改颜色的类，如果标题是特定值（https://jsfiddle.net/gxvqa5xa/）：

.bootstrap-select > .dropdown-toggle[title=Select],
.bootstrap-select > .dropdown-toggle[title=Select]:hover,
.bootstrap-select > .dropdown-toggle[title=Select]:focus,
.bootstrap-select > .dropdown-toggle[title=Select]:active { color: darkgrey; }

现在，如果它太脏或不可靠，插件确实支持事件监听器，所以你可以只听取变化，检查它是否为空并添加一个类（如果是）（我更喜欢这种方法）：

＆＃13;

$('.selectpicker').on('changed.bs.select', function (e) {
	$(this).prevAll('.dropdown-toggle').toggleClass('bs-placeholder', this.value === '');
}).trigger('changed.bs.select');

＆＃13;

@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.css);
*{outline:none !important;}

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active { color: red; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

<select name="box1" class="selectpicker form-control" title="Select">
  <option value="option1"> Option 1 </option>
  <option value="option2"> Option 2 </option>
  <option value="option3"> Option 3 </option>
</select>
<select name="box2" multiple class="selectpicker form-control" title="Select">
  <option value="option1"> Option 1 </option>
  <option value="option2"> Option 2 </option>
  <option value="option3"> Option 3 </option>
</select>

＆＃13;

Answer 2

不知道bootstrap选择是如何工作的，但我们在CSS中有属性选择器，你可以使用它们。像

这样的东西

elements[attribute] {

}

*******编辑1 ********

在深入了解BS-select之后，我发现了类似的东西

<select class="selectpicker" title="Choose one of the following...">
    <option>Mustard</option>

    <option>Ketchup</option>
    <option>Relish</option>
</select>

哪个会放置一个棕色的占位符。

**** 编辑2 * *****

工作代码

button.bs-placeholder[role='button']>span{ color:darkgrey; }

如何更改Bootstrap-select的占位符颜色

2 个答案: