如何更改引导选择占位符颜色

Question

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

Before

我尝试将其添加到我的 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

手头的主要问题是插件（引导选择）实际上并没有固定的方法来执行此操作。如果您只是使用单选（select 上的非multiple 属性），您可以依赖在选择值时添加 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; }

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

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

@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; }

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

Answer 2

不知道引导选择是如何工作的，但我们在 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; }

Answer 3

1. 为整个选择标签设置不同的颜色。
2. 为所有未选中的元素设置正常颜色。

select { color: red; }
option:not(:checked) { color: black; }
option:checked { color: black; }

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

https://jsfiddle.net/ojdoug22/

编辑：

option:checked { color: black; }

只需将此行添加到您的 CSS 中。

新的 JSFiddle： https://jsfiddle.net/ojdoug22/1/

编辑2： 添加了屏幕截图。我看到红色的“标题”选择选项，所有其他选项都是黑色的。如果我选择另一个，那么它会改变。