描述：jQSelect.js让你的下拉菜单变得漂亮起来
图片展示：
兼容浏览器：IE6以下的都可以看到效果
官方链接：无
JS下载：http://www.ijquery.cn/js/jQSelect.js
预览： http://www.ijquery.cn/study/demo/jqselect
打包下载：http://www.ijquery.cn/study/demo/jqselect/jqselect.zip
参数说明：无
JS引用代码：
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jQSelect.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#select01").jQSelect({});
});
</script>
[/js]
HTML代码：
[html]
<div id="">
<div id="select01">
<div>
<!--初始值-->
<input type="text" value="banner/图片类" />
<!--下拉的图片 <b></b>必须加上-->
<div><b></b></div>
</div>
<div>
<ul>
<li id="s1">banner/图片类</li>
<li id="s2">导航菜单类</li>
<li id="s3">选项卡类</li>
<li id="s4">文字类</li>
<li id="s5">表单类</li>
<li id="s6">浮动/弹出层类</li>
<li id="s7">其它类</li>
</ul>
</div>
</div>
</div>
[/html]
CSS代码：
[css]
.center{width:160px;}
/* selectbox */
.selectbox{width:160px;float:left;display:inline;position:relative;}
.cartes{
background-color:#fff;
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
background-image:-webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image:-moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image:-o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
background-image:-ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
background-image:linear-gradient(top, #eeeeee 0%, #ffffff 50%);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
border:1px solid #aaa;display:block;overflow:hidden;position:relative;height:23px;line-height:24px;padding:0 0 0 7px;color:#444;cursor:pointer;
}
.listTxt{border:none;background:none;padding:0px;font-size:14px;padding:4px 0;width:88%;height:16px;line-height:16px;cursor:pointer;}
.listBtn{
border-left:1px solid #aaa;position:absolute;right:0;top:0;display:block;height:100%;width:18px;
-webkit-border-radius:0 4px 4px 0;
-moz-border-radius:0 4px 4px 0;
border-radius:0 4px 4px 0;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
background:#ccc;background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
background-image:-webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
background-image:-moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
background-image:-o-linear-gradient(bottom, #ccc 0%, #eee 60%);
background-image:-ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
background-image:linear-gradient(top, #cccccc 0%, #eeeeee 60%);
}
.listBtn b{background:url('http://www.jsfoot.com/jquery/demo/2012-09-16/images/selectbg.png') no-repeat 0 -1px;display:block;width:100%;height:100%;}
.lists{
background:#fff;border:1px solid #aaa;border-top:0;position:absolute;top:24px;left:0;display:none;width:158px;
-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, .15);
-moz-box-shadow:0 4px 5px rgba(0, 0, 0, .15);
-o-box-shadow:0 4px 5px rgba(0, 0, 0, .15);
box-shadow:0 4px 5px rgba(0, 0, 0, .15);
-webkit-border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
border-radius:0 0 4px 4px;
}
.lists .list{margin:4px 0px 4px 0;padding:0 0 0 0;overflow-x:hidden;overflow-y:auto;max-height:200px;}
.lists li{padding:6px 0px 8px 8px;cursor:pointer;font-size:14px;height:20px;line-height:20px;color:#5e5e5e;font-size:14px;}
.lists li.cgray{background:#3875D7;color:#fff;}
.hover .lists{display:block;}
.hover .cartes{
border:1px solid #aaa;
-webkit-box-shadow:0 1px 0 #fff inset;
-moz-box-shadow:0 1px 0 #fff inset;
-o-box-shadow:0 1px 0 #fff inset;
box-shadow:0 1px 0 #fff inset;
background-color:#eee;
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
background-image:-webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
background-image:-moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
background-image:-o-linear-gradient(bottom, white 0%, #eeeeee 50%);
background-image:-ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
background-image:linear-gradient(top, #ffffff 0%,#eeeeee 50%);
-webkit-border-bottom-left-radius :0;
-webkit-border-bottom-right-radius:0;
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.hover .listBtn{background:transparent;border-left:none;filter:none;}
.hover .listBtn b{background-position:-18px 1px;}
[/css]