选择标签中的向下箭头图标 [英] 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:

http://jsfiddle.net/Yv6zx/24/

这篇关于选择标签中的向下箭头图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！