select是html中是一个特殊的属性，很多美工都不喜欢直接使用html默认的select控件了会需要模拟select效果，下面我整理了款纯css模拟select效果。
效果如下图
实例代码
代码如下
复制代码
<style type="text/css">
a{ width:100px; height:25px; background:#bcbab9; line-height:25px; display:block; position:relative; text-decoration:none;}
a b{ font-size:14px; color:#000; position:absolute; left:10px;}
a div{ width:100px; position:relative; top:25px; background:#8aaa1f;}
a:link div,a:visited div{ display:none;}
a:hover div,a:active div{ display:block;}
a:hover div span,a:active div span{ height:25px; line-height:25px; text-align:center; display:block; font-size:14px; color:#000;}
</style>
<script language="javascript" src="/static/js/jquery-1.7.2.min.js"></script>
<script language="javascript">
$(function(){
$("#menu span").click(function(){
$("#selb").html($(this).html());
});
});
</script>
<body>
<a href="#">
<b id="selb">选项1</b>
<div id="menu">
<span>选项1</span>
<span>选项2</span>
<span>选项3</span>
<span>选项4</span>
</div>
</a>
补充一个实例
js code:
代码如下
复制代码
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
//展开或关闭下拉菜单
$("#open_select").click(function(event){
event.stopPropagation();
$(".select_list").toggle();
});
//离开选择区域后，展开的下拉列表关闭
$(document).click(function(event){
var eo=$(event.target);
if($("#open_select").is(":visible") && eo.attr("class")!="select_list" && !eo.parent(".select_list").length)
$('.select_list').hide();
});
/*获取选中的值*/
var $dss=$(".currency_type");
$dss.click(function(){
var $c_attr=$(this).siblings().attr("class");//选择货币的国旗类
var $ensign=$("#ensign");
$ensign.attr("class",$c_attr);//将选中的货币国旗赋给$ensign
var $txt=$(this).text();//展开菜单中的列表文本值
var $hidden_txt=$(".hidden_txt");
var $t1=$("#open_select");//模拟文本框，接受选择的值
$t1.text($txt);
$hidden_txt.val($txt);
$(this).parents(".select_list").hide();
});
//下拉列表滑过的背景
$(".select_list li").hover(function(){
$(this).addClass("h_bg");
},function(){
$(this).removeClass("h_bg");
});
});
</script>
Css code:
<style type="text/css">
.select_box{float:left;width:80px;font-size:12px;font-family:Arial, Helvetica, sans-serif;}
.open_select_box{width:80px;position:relative;height:17px;}
#ensign{background-image:url(icon_country.png);background-repeat:none;display:inline-block;width:16px;height:11px;position:absolute;left:6px;top:4px;margin:0;}
#open_select{border:solid 1px #ccc;float:left;width:80px;text-align:center;height:18px;line-height:18px;position:relative;cursor:pointer;background:url(select_down_icon.jpg) no-repeat68px center;}
.select_list{padding:0;border:solid 1px #ccc;float:left;width:80px;margin:0;border-top:none;display:none;box-shadow:0 0 4px rgba(0, 0, 0, 0.1);}
.select_list li{text-align:left;height:22px;line-height:22px;cursor:pointer;width:100%;list-style-type:none;vertical-align:top;}
.h_bg{background:#f7f7f7;}
/*currency type*/
.currency_icon{background-image:url(icon_country.png);background-repeat:none;display:inline-block;width:16px;height:11px;margin:0 5px;}
.usd{background-position:left top;}
.eur{background-position:left -20px;}
.gbp{background-position:left -40px;}
.aud{background-position:left -60px}
.cad{background-position:0 -80px;}
.chf{background-position:0 -100px;}
.hkd{background-position:0 -120px;}
.cny{background-position:0 -140px;}
.hzd{background-position:0 -160px;}
</style>
Html code:
<div class="select_box">
<div class="open_select_box"><span class="usd" id="ensign"></span><spanid="open_select">USD</span></div>
<ul class="select_list">
<li><span class="currency_icon aud"></span><span class="currency_type">AUD</span></li>
<li><span class="currency_icon eur"></span><span class="currency_type">EUR</span></li>
<li><span class="currency_icon gbp"></span><span class="currency_type">GBP</span></li>
<li><span class="currency_icon usd"></span><span class="currency_type">USD</span></li>
<li><span class="currency_icon cad"></span><span class="currency_type">CAD</span></li>
<li><span class="currency_icon cny"></span><span class="currency_type">CNY</span></li>
<li><span class="currency_icon hkd"></span><span class="currency_type">HKD</span></li>
<li><span class="currency_icon hzd"></span><span class="currency_type">HZD</span></li>
<li><span class="currency_icon chf"></span><span class="currency_type">CHF</span></li>
</ul>
<input type="hidden"class="hidden_txt" />
</div>
如果觉得这样不方便的朋友，想要压缩包可以直接写Email给我，我的首页有QQ的Email接口，或zoowar@qq.com直接回复我即可。
