选择标签中的向下箭头图标 [英] Down arrow icon in Select Tag
本文介绍了选择标签中的向下箭头图标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
你好,我想知道我是如何把下面的代码(我上传到jsfiddle):
http://jsfiddle.net/Torrecilla/Yv6zx/3/
右边的这个箭头:
http://i45.tinypic.com/309nb74.png
这可能吗? o.O我做不到,谢谢
< select name =catsid =cats>
< option value =>所有类别< / option>
< option value => Cat 1< / option>
< option value => Cat 2< / option>
< option value => ...< / option>
< / select>
解决方案
是有可能的!试试这个:
CSS:
background:url('http ://i45.tinypic.com/309nb74.png')no-repeat right,-moz-linear-gradient(top,#FBFBFB 0%,#E9E9E9 100%);
background:url('http://i45.tinypic.com/309nb74.png')no-repeat right,-webkit-gradient(线性,左上角,左下角,颜色停止(0%,# FBFBFB),颜色停止(100%,#E9E9E9));
您需要调整填充,但您明白了。
DEMO:
http ://jsfiddle.net/Yv6zx/24/
Hi I would like to know how I put to the following code (i upload to jsfiddle): http://jsfiddle.net/Torrecilla/Yv6zx/3/
This arrow to the right: http://i45.tinypic.com/309nb74.png
It's possible? o.O I could not do, thanks
<select name="cats" id="cats">
<option value="">All the Categories</option>
<option value="">Cat 1</option>
<option value="">Cat 2</option>
<option value="">...</option>
</select>
解决方案
Yes it is possible! Try this:
CSS:
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
You will need to adjust the padding, but you get the idea.
DEMO:
这篇关于选择标签中的向下箭头图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文