select列表/菜单美化

表单select的样式是很难用CSS来直接美化的，我们只能通过js来模拟效果，我们先看下Demo
通过js把
<select name="select" id="select">
<option value="a1">项目1</option>
<option value="a2" selected="selected">项目2</option>
<option value="a3">项目3</option>
<option value="a4">项目4</option>
</select>
替换成
<div id="select" class="LeeSelect">
<input name="select" value="a2" type="hidden">
<span>项目2</span>
<small>选择</small>
<ul>
<li v="a1">项目1</li>
<li v="a2">项目2</li>
<li v="a3">项目3</li>
<li v="a4">项目4</li>
</ul>
</div>
再美化替换之后的代码，并加上行为效果，我的目的就达到了。

使用方法
1.引入jQuery和插件 LeeSelect.js
2.设置所要美化的select，$(“#select”).LeeSelect();
3.按自己设计的样式修改CSS
.LeeSelect{border:#ddd 1px solid;width:130px;height:25px;position:relative;overflow:visible;font-size:12px;}
.LeeSelect ul{display:none;list-style:none;margin:0;padding:0;width:130px;border:#ddd 1px solid;border-top:none;background:#f5f5f5;position:absolute;top:26px;left:-1px;}
.LeeSelect ul li{padding:5px;cursor:pointer;}
.LeeSelect ul .li2{background:#fff;}
.LeeSelect small{position:absolute;display:block;top:8px;right:7px;width:10px;padding-top:10px;height:0;background:#666;overflow:hidden;font-size:0;cursor:pointer;}
.LeeSelect span{display:block;padding:5px;}

From: http://www.xij.cn/blog/?p=16