<select>标记的渐变样式？

我正在尝试创建一个表单，其中输入字段的背景用渐变背景设计。它成功地代表了所有<input>标签，但不代表<select>标签。这可以做到吗？难道我做错了什么？<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); 
}

见下面的图片。

See the image below

来源

2011-08-15 Daniel

在什么浏览器？在Firefox 5看起来不错 – Sotiris

@Sotiris：在铬... – naveen

在Chrome 15中测试，在这里看起来也不错。 –

样式<select>很困难，因为浏览器试图使控件与OS匹配。您可以添加-webkit-appearance: none;以启用渐变，但也会删除箭头。

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

或者，如果你可以使用jQuery或原型，我强烈建议在其中<select>由可样式下拉取代了优秀Chosen plugin。

编辑：我不得不添加造型表单元素有时皱起了眉头。 Eric Meyer的article on the subject是很好的背景阅读。

来源

2011-08-15 15:43:03 andyb

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

您是否尝试过调试，在萤火虫？

如何使背景变得重要？

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

来源

2011-08-15 15:02:09 Lucas

你测试过了吗？ – naveen

像上面提到的索托里斯一样，它在FF5中工作。在发布之前没有检查过......但是，我遇到了Chrome问题，而！重要的是帮助不好。 – Daniel

是背景颜色工作呢？ – Lucas

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

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

你可以在这里找到更多的信息：http://uniformjs.com/。

我希望有帮助。

来源

2011-08-15 15:33:18

好的提示，我会看看这个！ – Daniel

<select>标记的渐变样式？

回答

相关问题