jQuery+css美化select样式插件
jQuery+css美化select样式插件：先看效果图：
代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>selectbox</title>
<style type="text/css">
body{font-family:"宋体","simsun",Arial,Helvetica,sans-serif;}
/*select*/
.hdMainBar{background:none repeat scroll 0 0 #f6f8f9;height:40px;overflow:visible;width:430px;margin:10px auto;font-size:14px;}
.ui-searchInput{position:relative;display:inline-block;height:10px; margin-top:5px;}
.t_header_search{background:none repeat scroll 0 0 white !important;border:1px solid #E2E9EF;filter:none;height:29px;position:absolute;width:338px;z-index:10;margin-left:15px;}
.jquery-selectbox{position:absolute;height:29px;width:98px !important;z-index:0;float:left;display:inline;color:#444;padding:0;background-color:#fff;background-image:-webkit-gradient(linear,left top,left bottom,from(#fefefe),to(#eaeaea));background-image:-webkit-linear-gradient(top,#fefefe,#eaeaea);background-image:-moz-linear-gradient(top,#fefefe,#eaeaea);background-image:-ms-linear-gradient(top,#fefefe,#eaeaea);background-image:-o-linear-gradient(top,#fefefe,#eaeaea);background-image:linear-gradient(top,#fefefe,#eaeaea);}
.jquery-selectbox .selecthover{z-index:700;}
.jquery-selectbox .jquery-selectbox-currentItem{padding:4px 0 5px 12px;white-space:nowrap;display:block;overflow:hidden;position:absolute;top:4px;z-index:-1;cursor:pointer;}
.jquery-selectbox .jquery-selectbox-list{display:none;top:30px;background:#fff;width:97px !important;padding-top:4px;overflow-x:hidden;overflow-y:auto;z-index:1000;border:1px solid #E2E9EF;color:#444;margin-left:-1px;}
.jquery-selectbox .jquery-selectbox-moreButton{float:right;width:97px;height:29px;cursor:pointer;background:url(http://www.phpin.net/data/attachment/forum/201405/04/180130b5x52kfppfq2xxxc.gif) 81px 12px no-repeat;z-index:1;border-right:1px solid #E2E9EF;_width:94px;}
.jquery-selectbox .jquery-selectbox-item.listelementhover{background:#eaeaea;}
.jquery-selectbox .jquery-selectbox-item{display:block;cursor:pointer;padding-left:12px;padding-top:2px;padding-bottom:2px; line-height:18px;}
#searchInput{border:0 none;width:238px;position:absolute;left:98px;height:26px;top:1px;line-height:26px;outline:none;font-size:14px;}
.ui_btn_go{position:absolute;left:340px;top:0px;border:none;background:url(http://www.phpin.net/data/attachment/forum/201405/04/180131pqiidx02qzifftbx.gif) no-repeat;width:66px;height:31px;margin-top:-1px;}
/*select*/
</style>
</head>
<body>
<form action="">
<div class="hdMainBar">
<div class="ui-searchInput">
<div class="t_header_search">
<div class="jquery-selectbox">
<div class="jquery-selectbox-moreButton"></div>
<select id="searchCategory">
<option>广告信息</option>
<option>旅游购物</option>
<option>餐饮娱乐</option>
<option>房产汽车</option>
<option>教育医疗</option>
<option>品牌综合</option>
</select>
<input type="text" value="" name="key" id="searchInput" />
<input type="submit" name="" value="" class="ui_btn_go" />
</div>
</div>
</div>
</div>
</form>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
/*jquery.selectbox插件*/
jQuery.fn.selectbox=function(options){var settings={className:'jquery-selectbox',animationSpeed:20,listboxMaxSize:10,replaceInvisible:false};var commonClass='jquery-custom-selectboxes-replaced';var listOpen=false;var showList=function(listObj){var selectbox=listObj.parents('.'+settings.className+'');listObj.slideDown(settings.animationSpeed,function(){listOpen=true;});selectbox.addClass('selecthover');jQuery(document).bind('click',onBlurList);return listObj;};
var hideList=function(listObj){var selectbox=listObj.parents('.'+settings.className+'');listObj.slideUp(settings.animationSpeed,function(){listOpen=false;jQuery(this).parents('.'+settings.className+'').removeClass('selecthover');});jQuery(document).unbind('click',onBlurList);return listObj;};
var onBlurList=function(e){var trgt=e.target;var currentListElements=jQuery('.'+settings.className+'-list:visible').parent().find('*').andSelf();if(jQuery.inArray(trgt,currentListElements)<0&&listOpen){hideList(jQuery('.'+commonClass+'-list'));}return false;};settings=jQuery.extend(settings,options||{});return this.each(function(){var _this=jQuery(this);if(_this.filter(':visible').length==0&&!settings.replaceInvisible) return;
var replacement=jQuery('<div class="'+settings.className+' '+commonClass+'">'+'<div class="'+settings.className+'-moreButton" />'+'<div class="'+settings.className+'-list '+commonClass+'-list" />'+'<span class="'+settings.className+'-currentItem" />'+'</div>');jQuery('option',_this).each(function(k,v){var v=jQuery(v);var listElement=jQuery('<span class="'+settings.className+'-item value-'+v.val()+' item-'+k+'">'+v.text()+'</span>');listElement.click(function(){var thisListElement=jQuery(this);var thisReplacment=thisListElement.parents('.'+settings.className);var thisIndex=thisListElement.className.split(' ');for(k1 in thisIndex){if(/^item-+$/.test(thisIndex)){thisIndex=parseInt(thisIndex.replace('item-',''),10);break;}};var thisValue=thisListElement.className.split(' ');for(k1 in thisValue){if(/^value-.+$/.test(thisValue)){thisValue=thisValue.replace('value-','');break;}};thisReplacment.find('.'+settings.className+'-currentItem').text(thisListElement.text());thisReplacment.find('select').val(thisValue).triggerHandler('change');var thisSublist=thisReplacment.find('.'+settings.className+'-list');if(thisSublist.filter(":visible").length>0){hideList(thisSublist);}else{showList(thisSublist);}}).bind('mouseenter',function(){jQuery(this).addClass('listelementhover');}).bind('mouseleave',function(){jQuery(this).removeClass('listelementhover');});jQuery('.'+settings.className+'-list',replacement).append(listElement);if(v.filter(':selected').length>0){jQuery('.'+settings.className+'-currentItem',replacement).text(v.text());}});replacement.find('.'+settings.className+'-moreButton').click(function(){var thisMoreButton=jQuery(this);var otherLists=jQuery('.'+settings.className+'-list').not(thisMoreButton.siblings('.'+settings.className+'-list'));hideList(otherLists);var thisList=thisMoreButton.siblings('.'+settings.className+'-list');if(thisList.filter(":visible").length>0){hideList(thisList);}else{showList(thisList);}}).bind('mouseenter',function(){jQuery(this).addClass('morebuttonhover');}).bind('mouseleave',function(){jQuery(this).removeClass('morebuttonhover');});_this.hide().replaceWith(replacement).appendTo(replacement);var thisListBox=replacement.find('.'+settings.className+'-list');var thisListBoxSize=thisListBox.find('.'+settings.className+'-item').length;if(thisListBoxSize>settings.listboxMaxSize);thisListBoxSize=settings.listboxMaxSize;if(thisListBoxSize==0)thisListBoxSize=1;var thisListBoxWidth=Math.round(_this.width()+5);var rchrome=/(chrome)[ \/]([\w.]+)/;var ua=navigator.userAgent.toString().toLowerCase();if(jQuery.support.safari&&!rchrome.exec(ua))thisListBoxWidth=thisListBoxWidth*1.2;replacement.css('width',thisListBoxWidth+'px');thisListBox.css({width:Math.round(thisListBoxWidth+46)+'px',height:thisListBoxSize+0+'em'});});};
jQuery.fn.unselectbox=function(){var commonClass='jquery-custom-selectboxes-replaced';return this.each(function(){var selectToRemove=jQuery(this).filter('.'+commonClass);selectToRemove.replaceWith(selectToRemove.find('select').show("fast"));});}
/*jquery.selectbox插件*/
/*执行*/
$(document).ready(function(){
$("#searchCategory").selectbox();
})
</script>
</body>
</html>
用到的图片：
实例打包：
页:
[1]