Question

我有一个带有多个选项的HTML选择表单。

我想修改文本选项的颜色，但仅限于某些选项。在下面的小提琴中，我修改了星期二选项的颜色，但只有在向下滚动选项时才能看到修改。当选择星期二时，我怎么能看到特定的颜色，即在选项的顶部？

代码：

＆＃13;

.form-control {
  color: blue;
}

.selected {
  color: red;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />

<form action="#" id="form" method="post" data-toggle="validator" style='text-align:center;'>
  <div class="form-inline">

    <select class="form-control" name="date">
      <option value="0">
        Date
      </option>
      <option value="1">
        Monday
      </option>
      <option value="2" selected class="selected">
        Tuesday
      </option>
      <option value="3">
        Wednesday
      </option>
      <option value="4">
        Thursday
      </option>

    </select>

  </div>

</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

Answer 1

更新了Jsfiddle

Option selected text color

<强> jQuery的：

$(function(){
    $("select").on("change", function(){
    $("select option").css("color", "blue");
    $(this).find("option:selected").css("color", "red");
  })
})

$("select option").css("color", "blue");

此行重置以前的颜色。

$(this).find("option:selected").css("color", "red");

这是选择框所选选项的颜色线。

Answer 2

这是一种方法，它保留每个选项的单独颜色，并将所选（顶部）设置为完全相同的颜色。

更新

由于某些原因，Firefox和Edge / IE都无法获得option元素的实际样式，所以我想出了这个脏技巧，其中{{1在data-color和select元素上设置了属性，当在option上找到时，将使用该属性，或者从option返回默认值{＆＃39; s select。

＆＃13;

data-color

＆＃13;

function selchanged(el) {
  var col = el.options[el.selectedIndex].getAttribute('data-color');
  if (col) {
    el.style.color = col;
  } else {
    el.style.color = el.getAttribute('data-color');
  }
}
// run once to set on load
selchanged(document.querySelector('.form-control'))

＆＃13;

.form-control,
.form-control option {
  color: blue;
}
.form-control option[data-color='#090'] {
  color: #090;
}
.form-control option[data-color='#f00'] {
  color: #f00;
}
.form-control option[data-color='#00f'] {
  color: #00f;
}
.form-control option[data-color='#0ff'] {
  color: #0ff;
}

＆＃13;

选项选择文字颜色

2 个答案: