Question

如果您在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上会显示，他们应该使用相同的套件吗？）。

非常感谢对这两件事的任何帮助。

Answer 1

我已将其跟踪到您选择框中的“-moz-linear-gradient”声明。有了它，就像你所描述的那样。没有它，没关系。

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

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

1 个答案: