css - 在 Bootstrap 3 中设置第一个选择选项的样式

Question

我正在尝试更改具有 Bootstrap 的 form-control 的第一个选择选项的字体颜色类如下:

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

我尝试使用 first-child 来设计它的样式属性如下，但它将所有内容着色为红色:

select.form-control { color: red; }
select.form-control option { color: black; }
select.form-control option:first-child { color: red; }

我什至试过内联样式，但它仍然无法覆盖 Bootstrap 的 css:

<select class="form-control">
  <option style="color: red;" color="red">1</option>
  <option>2</option>
  <option>3</option>
</select>

有趣的是，当第一个元素是 multiple 时，css 正确地设置了样式。风格，但这不是我需要的:

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

这是重现此内容的代码笔:http://codepen.io/anon/pen/MKjYjq

更新 1:

第一个元素是指 select 中的第一个选项(即 <option>1</option> )。我希望它是红色的，其余的是黑色的。

与原始 Codepen 报告的一些评论不同，即使是内联方法在 Mac 上的 Chrome 47、Safari 9 和 Firefox 42 中也不适用于我:

所需的选项是数字 2上图中(以及下面的其他选项)是黑色的，但选项 1是红色的。

Answer 1

基于 Javascript 的解决方案 ( http://codepen.io/anon/pen/ZQpGpY )

标记:

<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

CSS:

select.form-control.first-option-selected {
  color: red;
}

select.form-control > option {
  color: black;
}

Javascript(为了方便使用 jQuery):

$(function () {
  var selectElement = $('select.form-control');

  function ifFirstOptionSelectedMakeItRed() {
    if (selectElement[0].selectedIndex === 0) {
      selectElement.addClass('first-option-selected');
    } else {
      selectElement.removeClass('first-option-selected');
    }
  }

  ifFirstOptionSelectedMakeItRed();

  selectElement.on('change', function () {
    ifFirstOptionSelectedMakeItRed();
  })
});

我对这个解决方案的推理是这样的:

• 我认为您无法通过 css 检查选择了哪个选项。我的第一个想法是使用属性选择器。但是我在该元素的文档中找不到任何有用的属性。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
• 也不是选项元素https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
• 作为一个蹩脚的 css'er，我转向了 js - 那里的一切都非常简单 https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement您可以检查各种属性。我最终使用了 selectedIndex。当用户选择新选项时，会有一个 change 事件。 https://developer.mozilla.org/en-US/docs/Web/Events/change