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>

有趣的是，当css是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，我转向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 lol

<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

设置Bootstrap 3

4 个答案: