在 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 报告的一些 cmets 不同，即使是内联方法也不适用于 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

Answer 2

这来自您自己的代码：https://jsfiddle.net/oa9wj80x/2/

如果这不是你要问的，那么 IDK 哈哈

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

编辑 1

或者您正在寻找这种效果？ https://jsfiddle.net/oa9wj80x/3/

edit2

我认为这就是你想要做的？ https://jsfiddle.net/oa9wj80x/5/

<select id="slct" onchange="change()" class="form-control">
  <option id="opt1" value="1">1</option>
  <option id="opt2" value="2">2</option>
  <option id="opt3" value="3">3</option>
  <option id="opt4" value="4">4</option>
  <option id="opt5" value="5">5</option>
</select>
<script>
function change(){
    var x = document.getElementById("slct").value;

  if(x > 1){
    document.getElementById("slct").style.color = "black";
  }
  else{
    document.getElementById("slct").style.color = "red";
  }
}
</script>

Answer 3

<p>Even inline doesn't work:</p>
<select class="form-control">
  <option style="color:red;">1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

这是无需任何 css 更改即可工作。

Answer 4

浏览后我发现了一个适用于现代浏览器的纯 CSS 解决方案：

select:required:invalid {
  color: red;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

HTML

<select required class="form-control">
  <option value="" disabled selected>1</option>
  <option value="1">2</option>
  <option value="2">3</option>
</select>

来源：https://stackoverflow.com/a/29806043