当select OPTION的选中状态时，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>