Question

我有一个选择菜单。

<select class="empty">
    <option value="" selected disabled>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

select.empty {
    color: grey;
}
select.option{
    color:green;
}

我希望grey中有第一个选项。所以它类似于占位符。现在，当用户选择一个选项时，如何将文本设为绿色？目前是grey。

Answer 1

使用像铬这样的测试也工作正常

select option[disabled=""] {
  color:grey;
}
select option{
  color:green;
}

感谢希望这会有所帮助

<强>段

＆＃13;

select option[disabled=""] {
  color:grey;
}
select option{
  color:green;
}

＆＃13;

<select class="empty">
  <option value="" selected disabled>Please select</option>
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
</select>

＆＃13;

Answer 2

您可以将:checked伪类用于所选选项的绿色。这是一个应该起作用的示例代码

.empty option, .empty option:disabled:checked {
    color: grey;
}
.empty option:checked{
    color:green;
}

<select class="empty">
   <option value="" selected disabled>Please select</option>
   <option value="1">Item 1</option>
   <option value="2">Item 2</option>
   <option value="3">Item 3</option>
</select>

默认为灰色，选定项目为绿色

2 个答案: