Question

我正在使用select下拉列表。为了使选项固定，我将display:none用于first option。但我希望为该固定选项添加颜色，其他选项颜色正在应用但不适用于固定选项

这是代码

＆＃13;

.fixed-pos{
  display: none;
  color: red; /*this does not apply */
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="form-group search-options">
  <select class="form-control">
    <option class="fixed-pos">Search by ..</option>
    <option>One</option>
    <option>two</option>
  </select>                 
</div>

＆＃13;

Answer 1

这是因为它不是您看到的第一个选项。它是实际的选择框。这就是你如何做到的：

＆＃13;

select.form-control {
  color: #f00;
}
.fixed-pos {
  display: none;
}
select option {
  color: #000;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="form-group search-options">
  <select class="form-control">
    <option class="fixed-pos">Search by ..</option>
    <option>One</option>
    <option>two</option>
  </select>
</div>

＆＃13;

我希望这可以帮助你： - ）

PS。如果您在选择后不想让选择框变为红色，则需要在选择选项时添加一个类（JavaScript）。

如何应用颜色选择固定选项

1 个答案: