我正在尝试创建一个表单,其中输入字段的背景使用渐变背景设置样式.它成功地用于所有< 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);
}
见下图.
解决方法
样式< 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是很好的背景阅读.
