<select>标签的渐变样式？</select>

Question

我正在尝试创建一个表单，其中输入字段的背景使用渐变背景设置样式。它适用于所有<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);
}

见下图。

Answer 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，我强烈推荐使用可以设置样式的下拉列表替换<select>的优秀Chosen plugin。

编辑我必须添加样式表单元素有时不受欢迎。 Eric Meyer的article on the subject是很好的背景阅读。

Answer 2

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

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

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

我希望有所帮助。

Answer 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;
    }