select option项目带图片-优快云博客

http://www.corange.cn//uploadfiles/120_72973.jpg

演示地址:http://www.corange.cn/demo/3826/index.html
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.customselect.js"></script>
<title>Custom select boxes with icons</title>
<style type="text/css">
#iconselect {
background: url(select-bg.gif) no-repeat;
height: 25px;
width: 250px;
font: 13px Arial, Helvetica, sans-serif;
padding-left: 15px;
padding-top: 4px;
}
.selectitems {
width: 230px;
height: 25px;
border-bottom: dashed 1px #ddd;
padding-left: 10px;
padding-top: 2px;
}
.selectitems span {
margin-left: 5px;
}
#iconselectholder {
width: 250px;
overflow: auto;
display: none;
position: absolute;
background-color:#fff5ec;
}
.hoverclass{
background-color: #fff;
cursor: pointer;
}
.selectedclass{
background-color: #ff9;
}
</style>
<script type="text/javascript">
$(function(){
$('#customselector').customSelect();
});
</script>
</head>

<body>

<select name="select" class="customselect" title="" id="customselector">
<option value="icon1" title="images/attention.gif">Attention icon</option>
<option value="icon2" title="images/backward.gif">Back Icon</option>
<option value="icon3" title="images/base.gif">Base Icon</option>
</select>
</body>
</html>

原文地址:http://www.corange.cn/archives/2012/04/3826.html