<select> 标签的渐变样式？答案

【问题标题】：Gradient style for <select> tag?<select> 标签的渐变样式？
【发布时间】：2011-08-15 14:56:35
【问题描述】：

我正在尝试创建一个表单，其中输入字段的背景设置为渐变背景。它适用于所有 <input> 标签，但不适用于 <select> 标签。这可以做到吗？我做错了吗？

我正在使用的 CSS：

form#contact input[type="text"], input[type="url"], 
input[type="email"], input[type="tel"], textarea, select {
    margin: 3px 0 0 0;
    padding: 6px; 
    width: 260px; 
    font-family: arial, sans-serif; 
    font-size: 12px; 
    border: 1px solid #ccc;
    background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px);
}

见下图。

【问题讨论】：

在什么浏览器中？在 Firefox 5 中看起来不错
在 Chrome 15 中测试过，这里看起来也不错。
我使用的是 Chrome 15.0.849.0 dev-m，这就是上面截图的来源。
老实说，我会为表单控件使用背景图片。
虽然被标记为 stackoverflow.com/questions/3831957/… 的骗子，但一年在浏览器时间尺度上是很长的时间，所以除非有人强烈反对，否则我会保持开放。这里的话语也比以前好得多。

标签： css

【解决方案1】：

样式<select> 很困难，因为浏览器会尝试渲染控件以匹配操作系统。您可以添加-webkit-appearance: none; 以启用渐变，但这也会删除箭头。

见Add gradient to select box w/ CSS3 in chrome?和Background Image for Select (dropdown) does not work in Chrome

或者如果你可以使用 jQuery 或 Prototype，我强烈推荐优秀的Chosen plugin，其中<select> 被替换为可以设置样式的下拉列表。

编辑：我必须添加样式的表单元素有时会令人不悦。 Eric Meyer 的article on the subject 是很好的背景阅读。

【讨论】：

感谢您提供几个选项和一些好的背景信息！我会研究一下 JS 插件！

【解决方案2】：

由于您使用的操作系统和 Internet 浏览器，您可能会遇到此问题。

解决这个问题的一个简单方法是使用一个名为 Uniform 的 JQuery 库。它允许您根据需要设置表单元素的样式，并且跨浏览器兼容。

您可以在此处找到更多信息：http://uniformjs.com/。

希望对你有帮助。

【讨论】：

好提示，我也会看看这个！

【解决方案3】：

你试过在 firebug 中调试它吗？

让背景变得重要怎么样？

form#contact input[type="text"], input[type="url"], 

    input[type="email"], input[type="tel"], textarea, select {
        margin: 3px 0 0 0;
        padding: 6px; 
        width: 260px; 
        font-family: arial, sans-serif; 
        font-size: 12px; 
        border: 1px solid #ccc;
        background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF)) !important;
        background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px) !important;
    }

【讨论】：

就像上面提到的 Sotoris，它在 FF5 中工作。在发布之前没有检查......但是，我在使用 Chrome 时遇到了问题，不幸的是 !important 没有帮助。