如何在css中更改选择的选定项目文本颜色答案

【问题标题】：How to change selected item text color of select in css如何在css中更改选择的选定项目文本颜色
【发布时间】：2020-09-04 04:36:01
【问题描述】：

我正在尝试更改 css 中选定的颜色项目。我试过了，但我失败了，有人可以帮助我如何实现我的目标。

谢谢

select option:checked {
  color: #000 !important;
}

<select className="form-control input-box" {...input} required>
  <option value="">Task Type</option>
  <option value="Meeting">Meeting</option>
  <option value="FollowUp">Follow Up</option>
  <option value="Viewing">Viewing</option>
  <option value="reminder">Reminder</option>
  <option value="other">Other</option>
</select>

【问题讨论】：

你能更详细地描述你的问题吗？是否要更改所选项目的颜色？还是所选项目的背景？
@YatendrasinhJoddha OP 想要更改所选选项的颜色。
@YatendrasinhJoddha 是的，我想更改所选项目的颜色
我认为您的代码正在运行。只需尝试更改您在 css 中应用的颜色。 jsfiddle.net/2t4w31ex 看看这个。
这能回答你的问题吗？ How to change the text color of first select option

标签： javascript html css sass

【解决方案1】：

下拉菜单基于用户的操作系统，而不是浏览器本身。设置下拉菜单样式的最佳方法是隐藏默认下拉菜单并创建一个伪下拉菜单。

通过https://www.w3schools.com/howto/howto_custom_select.asp 了解如何实现此技巧。

【讨论】：

【解决方案2】：

 select {
    color:red;
}

option:not(:checked) { 
    color:black;
 }

<select className="form-control input-box">
        <option value="">Task Type</option>
        <option value="Meeting">Meeting</option>
        <option value="FollowUp">Follow Up</option>
        <option value="Viewing">Viewing</option>
        <option value="reminder">Reminder</option>
        <option value="other">Other</option>
    </select>

【讨论】：