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

Question

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

我尝试将此添加到我的 css

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

After, which works fine. But this also made the options a dark grey instead of black. 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 的颜色，具体取决于它是 "Select" 还是 "Option 1"?

PS。这是 Chrome 检查器工具向我展示的 Select 而Option 1，除了这两个，别无选择。

Answer 1

不知道 bootstrap select 是如何工作的，但我们在 CSS 中确实有 select 或属性，您可以使用它们。像

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 2

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

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：添加了屏幕截图。我看到红色 "title" select 选项，其他所有选项都是黑色的。如果我 select 另一个然后它改变。

Answer 3

手头的主要问题是插件 (bootstrap-select) 并没有真正的固定方法来执行此操作。如果您只是使用单个 select（select 上的非 multiple 属性），您可以依赖 bs-placeholder class值是 selected，它（如果您使用的是 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; }
  }
  ... 
}

唯一的问题是插件不会添加 class 如果它是倍数 select，所以你必须有点创意来确定一个值是否是 select编辑。不幸的是，我能看到默认发生的唯一 DOM 属性操作是标题更改 .dropdown-toggle。如果您不介意将初始 title 属性硬编码到 CSS 中，您可以添加一个 class 来更改颜色，如果标题是某个特定值，就像这样 (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; }

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

$('.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>

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

How to change Bootstrap-select's placeholder color

html

css

forms

twitter-bootstrap

bootstrap-select