javascript - 由于 Chrome 中的线性渐变，选择不可见

Question

我有一个选择框，我使用线性渐变作为背景。在 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>

Answer 1

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