javascript - 由于Chrome中存在线性渐变，因此选择不可见

我有一个选择框，我使用线性渐变作为背景。在Firefox中，一切正常，但在Chrome中，我必须将鼠标悬停以查看选项，因为文本为白色，背景也为白色。看下面的图片：



我认为是删除线性渐变，因为我不能使用jQuery，Javascript或PHP都可以。有人知道解决此问题的最佳方法吗？

这是一个codepen可以提供帮助。

select {
    color: #fff;
    background-color: #12964f;
    background: linear-gradient(#4eba71, #12964f);
}

<select name="" id="">
    <option value="">first value</option>
    <option value="">second value</option>
    <option value="">third value</option>
</select>

最佳答案

select {
    color: #fff;
    background-color: #12964f;
    background: linear-gradient(#4eba71, #12964f);
}

select option {
  color: #000;
}

<select name="" id="">
    <option value="">first value</option>
    <option value="">second value</option>
    <option value="">third value</option>
</select>

您可以在选项中添加color:#000，这不会影响所选的选项。

http://codepen.io/anon/pen/GWBOqx

关于javascript - 由于Chrome中存在线性渐变，因此选择不可见，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43024975/