css – 标签的渐变样式？

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

原文地址：https://www.jb51.cc/css/215336.html