<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;以启用渐变,但也会删除箭头.

请参阅添加渐变以在chrome中选择带有CSS3的框？和背景图像选择(下拉列表)在Chrome中不起作用

或者,如果您可以使用jQuery或Prototype,我强烈推荐使用优秀的Chosen插件,在该插件中可以使用<select>可以设置样式的下拉列表替换.

编辑:我必须添加样式表单元素有时不受欢迎.Eric Meyer 关于这个主题的文章是很好的背景阅读.