由於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