在 Firefox 中更改表单选择选项的字体颜色答案

【问题标题】：Changing the font color for a form select option in Firefox在 Firefox 中更改表单选择选项的字体颜色
【发布时间】：2010-06-10 19:55:40
【问题描述】：

见我的church website。

如果您在 Firefox 中查看该页面，然后单击表单的选择部分（在“您想联系谁？”旁边），您会看到当您将鼠标悬停在某个选项上时，字体为白色.

这似乎是 Firefox 特有的。

这里是相关的 CSS。

input, textarea, select, option {
    padding: 6px;
    border: solid 1px #E5E5E5;
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 200px;
    background: #FFFFFF url(images/from-grad.jpg) left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;
}
option {
    padding:0px;
}
textarea {
    width: 400px;
    max-width: 400px;
    height: 150px;
    line-height: 150%;
}
input:hover, textarea:hover, input:focus, textarea:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;
}
option:hover, option:focus, select:hover, select:focus {
    color: black;
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;
}

另一个注意事项是，我根本无法在 Google Chrome 上显示任何背景渐变（但在 Safari 上却可以，而且它们应该使用相同的工具包？）。

对于这两件事的任何帮助将不胜感激。

【问题讨论】：

你的意思是当项目被选中时，文本是白色的而项目被突出显示（在 Windows 上通常是蓝色，取决于你的配色方案）？

标签： css forms firefox google-chrome select

【解决方案1】：

我已将其追溯到您选择框上的“-moz-linear-gradient”声明。有了它，它就像你描述的那样。没有它，很好。

您尝试在选择框上实现的自定义级别是（令人钦佩的，但是）一个远景。为了在每个浏览器中保持正确的外观，您必须使用某种 html/css/javascript 列表来覆盖您的选择框。如果你问我，不值得麻烦。

【讨论】：