当选择选项的选中状态时，CSS 不会覆盖文本颜色的 USER AGENT STYLE

Question

我们正面临 CSS 文本颜色处理的问题。当我们从处于选中状态的选项上移开焦点时，就会有一个用户代理样式应用于它。甚至 !important 也不起作用。

.msi-standard .default-window-style .window-main-layout .dialog-window-content .v-select select option:checked {
    background-image: -webkit-linear-gradient(-270deg, #9a1032, #9a1032);
    background-image: linear-gradient(0deg, #9a1032, #9a1032);
    color: #FFF;
}

以上代码是我们的自定义代码。但是下面的用户代理样式覆盖了我们的 CSS 代码。

select:-internal-list-box option:checked {
    background-color: -internal-inactive-list-box-selection;
    color: -internal-inactive-list-box-selection-text;
}

我们有覆盖背景颜色的解决方案，但我们还没有找到覆盖文本颜色的解决方案。

我们需要覆盖文本颜色的解决方案。

Answer 1

我尝试了样式，应该可以帮助您:还在选择周围添加了一个 div 来完成需要的内容。

看看吧，希望对你有帮助。您可以根据需要进行调整，显然这只是解决方案背后的想法。

.test select{
   background: transparent;
   border: 1px solid green;
   font-size: 14px;
   height: 29px;
   padding: 5px; 
   width: 268px;
   }
 

select#mer {
   -webkit-appearance: button;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-user-select: none;
   
   background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
}

select#mer option:checked {
    background: blue;
    background-image: -webkit-linear-gradient(-270deg, #9a1032, #9a1032);
    background-image: linear-gradient(0deg, #9a1032, #9a1032);
    color: red;
}

<div class="test">
<select id="mer">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>