单击表单时保持表单选择下拉的背景颜色

Question

我自定义了一个下拉菜单。

<select name="country">
      <option value="Andorra">Andorra</option>
      <option value="Albania">Albania</option>
      <option value="Armenia">Armenia</option>
      <option value="Austria">Austria</option>
</select>

使用以下 CSS

select {
   display: none;
}

select {
   width: 8em;
   font-family: Segoeui;
   font-size: 28px;
   padding: 5px 5px;
   margin: 5px;
   display: inline-flex;
   font-weight: 300;
   outline: none;
   position: relative;
   background: #ccc;
   color: white;
   border-radius: 8px;
}

select:hover{
   background: #eb4410;
}
select:focus{
   background: #eb4410;
}
select option:selected{
   background: #eb4410; !important
}

如我所愿：

悬停之前。

悬停时

选择时：

关键问题是当我现在单击屏幕上的其他位置时，背景颜色会变为原来的颜色。

即

当点击下拉菜单时。

我的问题是 2 倍。

1) 当我从下拉列表中进行选择时，我当时悬停的选项会显示为标准蓝色（请参阅上面的“悬停时”）。如何更改该颜色？

2) 在我选择了一个项目然后单击下拉框后，如何使框保持橙色背景（请参阅上面的“单击下拉框时”）？

我希望能够仅使用 CSS 解决这个问题。

谢谢

Answer 1

将此添加到您的 CSS：

select:not(:focus){
  background: #eb4410;  
}

这个问题是关于在选择失去焦点时如何保持背景颜色的问题。

改变<option>元素的样式并不容易。它们由您的操作系统呈现，而不是由任何 HTMl 或 CSS 代码呈现。