以另一种颜色更改选择选项时出现问题[重复]

Posted 2023-02-21

【中文标题】以另一种颜色更改选择选项时出现问题[重复]

【英文标题】：Problem when changing select option in another color [duplicate]

【发布时间】：2020-04-25 22:29:35

【问题描述】：

我创建了一个选择。但我不知道如何在选项区域中将蓝色边框和悬停背景更改为另一种颜色...

你有解决办法吗？

我的代码：

<select name="slct2" id="slct2" required title="">
              <!-- Options -->
              <option value="" hidden>Jahr</option>
              <option>2020</option>
              <option>2019</option>
      </select>

【参考方案1】：

你是这样的吗？

select 
  width: 150px;
  margin: 50px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://image.flaticon.com/icons/png/512/61/61041.png)
  96% / 15% no-repeat #EEE;
    outline:none;

option:hover
background:coral

<select name="slct2" id="slct2" required title="">
  <option value="" hidden>Jahr</option>
  <option>2020</option>
  <option>2019</option>
  <option>2018</option>
 </select>

【讨论】：

感谢您的示例。如果我从一个选项导航到另一个选项，是否可以将悬停背景颜色从蓝色更改为另一种颜色？默认颜色是蓝色，我想更改它:)

【参考方案2】：

蓝色边框可以改变

select outline: none;

但据我所知，您无法更改选择选项的颜色，因为这是由浏览器本身呈现的，并且还取决于操作系统（Windows 为蓝色，ubuntu 为橙色，...）。如果确实有必要，您始终可以做的替代方法是创建自定义下拉列表，但这涉及相当多的工作（例如：https://dev.to/emmabostian/creating-a-custom-accessible-drop-down-3gmo）。