[英]Down arrow icon in Select Tag
Hi I would like to know how I put to the following code: http://jsfiddle.net/Torrecilla/Yv6zx/3/嗨,我想知道我是如何输入以下代码的: http : //jsfiddle.net/Torrecilla/Yv6zx/3/
This arrow to the right:这个向右的箭头:
Is it possible?是否可以? I could not figure it out我想不通
<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>
CSS CSS
body {
margin-top:20px;
margin-left:20px;
}
select {
padding:3px;
margin: 0;
border-radius:4px;
-webkit-box-shadow:
0 0px 0 #ccc,
0 0px #fff inset;
background: -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
color:black;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
cursor:pointer;
border: 1px solid #ccc;
}
Yes it is possible!对的,这是可能的! Try this:尝试这个:
CSS: 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:演示:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.