使用渐变和自定义箭头为SELECT(选项)标签设置样式 [英] Styling SELECT (Option) tags with gradient and custom arrow
问题描述
您可以在这里看到我的整个HTML。您可以将其复制/粘贴到本地演示文档中,并查看我指的是什么。
You can see my entire HTML here. You can copy/paste it into a demo document locally and see what I'm referring to.
基本上,我想对框进行风格设置,以在右侧同时具有渐变和自定义箭头。它显示在上图中。
Basically I want to style the boxes to have both a gradient AND a custom arrow on the right. It's shown in the image above.
问题是我得到的渐变是通过这个代码:
The problem is that the gradient I am getting is via this code:
背景:-webkit-gradient(线性,左上,左下,从(#f8f8f8)到(#ececec));
这是我上面代码中的第21行。但是因为background属性已经被这行占用,我不能包含一个url(image.png)标签来指定自定义向下箭头图片,这是我的代码中的第20行。
This is line 21 in my code above. But because the "background" attribute is already taken up by this line, I cannot also include a "url(image.png)" tag to specify the custom down-arrow image, which is line 20 in my code.
有一种方法,我可以有渐变和向下箭头图像?
Is there a way I can have gradient and a down-arrow image?
谢谢!
推荐答案
选中此 链接
Check this link
background: #6cab26;
background: url(IMAGE_URL); /* fallback */
background: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background: url(IMAGE_URL), -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background: url(IMAGE_URL), -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background: url(IMAGE_URL), -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background: url(IMAGE_URL), linear-gradient(top, #444444, #999999); /* W3C */
这篇关于使用渐变和自定义箭头为SELECT(选项)标签设置样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!