jQuery Select下拉框美化特效代价

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery Select下拉框美化特效代价的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Select下拉框美化特效</title>
<link href="css/select.css" rel="stylesheet" />
<link href="css/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
</head>
<body>
<div class="vertical">
<select id="mySelect">
	<option value="1">成功1</option>
	<option value="2">成功2</option>
	<option value="3" selected="selected">成功3</option>
	<option value="4">成功4</option>
	<option value="5">失败5</option>
	<option value="6">失败6</option>
	<option value="7">失败7</option>
	<option value="8">失败8</option>
	<option value="9">失败9</option>
	<option value="10">失败10</option>
	<option value="11">失败11</option>
	<option value="12">失败12</option>
</select>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/jquery.select.js"></script>
<script type="text/javascript">
	$(function () {
	   // $("#mySelect").select(); 不传参数可以这样写
		$("#mySelect").select({
			width: "200px"
		});
		//可选参数,不填就是默认值
		//width: "180px",            //生成的select框宽度
		//listMaxHeight:"200px",     //生成的下拉列表最大高度
		//themeColor: "#00bb9c",    //主题颜色
		//fontColor: "#000",        //字体颜色
		//fontFamily: "'Helvetica Neue', arial, sans-serif",    //字体种类
		//fontSize:"15px",           //字体大小
		//showSearch: false,        //是否启用搜索框
		//rowColor:"#fff",          //行原本的颜色
		//rowHoverColor: "#0faf03", //移动选择时，每一行的hover底色
		//fontHoverColor: "#fff",   //移动选择时，每一行的字体hover颜色
		//mainContent: "请选择",    //选择显示框的默认文字
		//searchContent: "关键词搜索"   //搜索框的默认提示文字  
	});
</script>
</body>
</html>

JS代码(jquery.mCustomScrollbar.concat.min.js):

/* == jquery mousewheel plugin == Version:3.1.13,License:MIT License (MIT) */
!function(a){
	"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}
(function(a){
	function b(b){
	var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;
	if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){
	if(1===g.deltaMode){
	var q=a.data(this,"mousewheel-line-height");
	j*=q,m*=q,l*=q}
else if(2===g.deltaMode){
	var r=a.data(this,"mousewheel-page-height");
	j*=r,m*=r,l*=r}
if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){
	var s=this.getBoundingClientRect();
	o=b.clientX-s.left,p=b.clientY-s.top}
return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}
}
function c(){
	f=null}
function d(a,b){
	return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}
var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;
	if(a.event.fixHooks)for(var j=g.length;
	j;
	)a.event.fixHooks[g[--j]]=a.event.mouseHooks;
	var k=a.event.special.mousewheel={
	version:"3.1.12",setup:function(){
	if(this.addEventListener)for(var c=h.length;
	c;
	)this.addEventListener(h[--c],b,!1);
	else this.onmousewheel=b;
	a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))}
,teardown:function(){
	if(this.removeEventListener)for(var c=h.length;
	c;
	)this.removeEventListener(h[--c],b,!1);
	else this.onmousewheel=null;
	a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")}
,getLineHeight:function(b){
	var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();
	return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16}
,getPageHeight:function(b){
	return a(b).height()}
,settings:{
	adjustOldDeltas:!0,normalizeOffset:!0}
}
;
	a.fn.extend({
	mousewheel:function(a){
	return a?this.bind("mousewheel",a):this.trigger("mousewheel")}
,unmousewheel:function(a){
	return this.unbind("mousewheel",a)}
}
)}
);
	!function(a){
	"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}
(function(a){
	function b(b){
	var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;
	if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){
	if(1===g.deltaMode){
	var q=a.data(this,"mousewheel-line-height");
	j*=q,m*=q,l*=q}
else if(2===g.deltaMode){
	var r=a.data(this,"mousewheel-page-height");
	j*=r,m*=r,l*=r}
if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){
	var s=this.getBoundingClientRect();
	o=b.clientX-s.left,p=b.clientY-s.top}
return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}
}
function c(){
	f=null}
function d(a,b){
	return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}
var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;
	if(a.event.fixHooks)for(var j=g.length;
	j;
	)a.event.fixHooks[g[--j]]=a.event.mouseHooks;
	var k=a.event.special.mousewheel={
	version:"3.1.12",setup:function(){
	if(this.addEventListener)for(var c=h.length;
	c;
	)this.addEventListener(h[--c],b,!1);
	else this.onmousewheel=b;
	a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))}
,teardown:function(){
	if(this.removeEventListener)for(var c=h.length;
	c;
	)this.removeEventListener(h[--c],b,!1);
	else this.onmousewheel=null;
	a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")}
,getLineHeight:function(b){
	var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();
	return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16}
,getPageHeight:function(b){
	return a(b).height()}
,settings:{
	adjustOldDeltas:!0,normalizeOffset:!0}
}
;
	a.fn.extend({
	mousewheel:function(a){
	return a?this.bind("mousewheel",a):this.trigger("mousewheel")}
,unmousewheel:function(a){
	return this.unbind("mousewheel",a)}
}
)}
);
	/* == malihu jquery custom scrollbar plugin == Version:3.1.3,License:MIT License (MIT) */
!function(e){
	"undefined"!=typeof module&&module.exports?module.exports=e:e(jQuery,window,document)}
(function(e){
	!function(t){
	var o="function"==typeof define&&define.amd,a="undefined"!=typeof module&&module.exports,n="https:"==document.location.protocol?"https:":"http:",i="cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js";
	o||(a?require("jquery-mousewheel")(e):e.event.special.mousewheel||e("head").append(decodeURI("%3Cscript src="+n+"//"+i+"%3E%3C/script%3E"))),t()}
(function(){
	var t,o="mCustomScrollbar",a="mCS",n=".mCustomScrollbar",i={
	setTop:0,setLeft:0,axis:"y",scrollbarPosition:"inside",scrollInertia:950,autoDraggerLength:!0,alwaysShowScrollbar:0,snapOffset:0,mouseWheel:{
	enable:!0,scrollAmount:"auto",axis:"y",deltaFactor:"auto",disableOver:["select","option","keygen","datalist","textarea"]}
,scrollButtons:{
	scrollType:"stepless",scrollAmount:"auto"}
,keyboard:{
	enable:!0,scrollType:"stepless",scrollAmount:"auto"}
,contentTouchScroll:25,documentTouchScroll:!0,advanced:{
	autoScrollOnFocus:"input,textarea,select,button,datalist,keygen,a[tabindex],area,object,[contenteditable='true']",updateOnContentResize:!0,updateOnImageLoad:"auto",autoUpdateTimeout:60}
,theme:"light",callbacks:{
	onTotalScrollOffset:0,onTotalScrollBackOffset:0,alwaysTriggerOffsets:!0}
}
,r=0,l={
}
,s=window.attachEvent&&!window.addEventListener?1:0,c=!1,d=["mCSB_dragger_onDrag","mCSB_scrollTools_onDrag","mCS_img_loaded","mCS_disabled","mCS_destroyed","mCS_no_scrollbar","mCS-autoHide","mCS-dir-rtl","mCS_no_scrollbar_y","mCS_no_scrollbar_x","mCS_y_hidden","mCS_x_hidden","mCSB_draggerContainer","mCSB_buttonUp","mCSB_buttonDown","mCSB_buttonLeft","mCSB_buttonRight"],u={
	init:function(t){
	var t=e.extend(!0,{
}
,i,t),o=f.call(this);
	if(t.live){
	var s=t.liveSelector||this.selector||n,c=e(s);
	if("off"===t.live)return void m(s);
	l[s]=setTimeout(function(){
	c.mCustomScrollbar(t),"once"===t.live&&c.length&&m(s)}
,500)}
else m(s);
	return t.setWidth=t.set_width?t.set_width:t.setWidth,t.setHeight=t.set_height?t.set_height:t.setHeight,t.axis=t.horizontalScroll?"x":p(t.axis),t.scrollInertia=t.scrollInertia>0&&t.scrollInertia<17?17:t.scrollInertia,"object"!=typeof t.mouseWheel&&1==t.mouseWheel&&(t.mouseWheel={
	enable:!0,scrollAmount:"auto",axis:"y",preventDefault:!1,deltaFactor:"auto",normalizeDelta:!1,invert:!1}
),t.mouseWheel.scrollAmount=t.mouseWheelPixels?t.mouseWheelPixels:t.mouseWheel.scrollAmount,t.mouseWheel.normalizeDelta=t.advanced.normalizeMouseWheelDelta?t.advanced.normalizeMouseWheelDelta:t.mouseWheel.normalizeDelta,t.scrollButtons.scrollType=g(t.scrollButtons.scrollType),h(t),e(o).each(function(){
	var o=e(this);
	if(!o.data(a)){
	o.data(a,{
	idx:++r,opt:t,scrollRatio:{
	y:null,x:null}
,overflowed:null,contentReset:{
	y:null,x:null}
,bindEvents:!1,tweenRunning:!1,sequential:{
}
,langDir:o.css("direction"),cbOffsets:null,trigger:null,poll:{
	size:{
	o:0,n:0}
,img:{
	o:0,n:0}
,change:{
	o:0,n:0}
}
}
);
	var n=o.data(a),i=n.opt,l=o.data("mcs-axis"),s=o.data("mcs-scrollbar-position"),c=o.data("mcs-theme");
	l&&(i.axis=l),s&&(i.scrollbarPosition=s),c&&(i.theme=c,h(i)),v.call(this),n&&i.callbacks.onCreate&&"function"==typeof i.callbacks.onCreate&&i.callbacks.onCreate.call(this),e("#mCSB_"+n.idx+"_container img:not(."+d[2]+")").addClass(d[2]),u.update.call(null,o)}
}
)}
,update:function(t,o){
	var n=t||f.call(this);
	return e(n).each(function(){
	var t=e(this);
	if(t.data(a)){
	var n=t.data(a),i=n.opt,r=e("#mCSB_"+n.idx+"_container"),l=e("#mCSB_"+n.idx),s=[e("#mCSB_"+n.idx+"_dragger_vertical"),e("#mCSB_"+n.idx+"_dragger_horizontal")];
	if(!r.length)return;
	n.tweenRunning&&N(t),o&&n&&i.callbacks.onBeforeUpdate&&"function"==typeof i.callbacks.onBeforeUpdate&&i.callbacks.onBeforeUpdate.call(this),t.hasClass(d[3])&&t.removeClass(d[3]),t.hasClass(d[4])&&t.removeClass(d[4]),l.css("max-height","none"),l.height()!==t.height()&&l.css("max-height",t.height()),_.call(this),"y"===i.axis||i.advanced.autoExpandHorizontalScroll||r.css("width",x(r)),n.overflowed=y.call(this),M.call(this),i.autoDraggerLength&&S.call(this),b.call(this),T.call(this);
	var c=[Math.abs(r[0].offsetTop),Math.abs(r[0].offsetLeft)];
	"x"!==i.axis&&(n.overflowed[0]?s[0].height()>s[0].parent().height()?B.call(this):(V(t,c[0].toString(),{
	dir:"y",dur:0,overwrite:"none"}
),n.contentReset.y=null):(B.call(this),"y"===i.axis?k.call(this):"yx"===i.axis&&n.overflowed[1]&&V(t,c[1].toString(),{
	dir:"x",dur:0,overwrite:"none"}
))),"y"!==i.axis&&(n.overflowed[1]?s[1].width()>s[1].parent().width()?B.call(this):(V(t,c[1].toString(),{
	dir:"x",dur:0,overwrite:"none"}
),n.contentReset.x=null):(B.call(this),"x"===i.axis?k.call(this):"yx"===i.axis&&n.overflowed[0]&&V(t,c[0].toString(),{
	dir:"y",dur:0,overwrite:"none"}
))),o&&n&&(2===o&&i.callbacks.onImageLoad&&"function"==typeof i.callbacks.onImageLoad?i.callbacks.onImageLoad.call(this):3===o&&i.callbacks.onSelectorChange&&"function"==typeof i.callbacks.onSelectorChange?i.callbacks.onSelectorChange.call(this):i.callbacks.onUpdate&&"function"==typeof i.callbacks.onUpdate&&i.callbacks.onUpdate.call(this)),X.call(this)}
}
)}
,scrollTo:function(t,o){
	if("undefined"!=typeof t&&null!=t){
	var n=f.call(this);
	return e(n).each(function(){
	var n=e(this);
	if(n.data(a)){
	var i=n.data(a),r=i.opt,l={
	trigger:"external",scrollInertia:r.scrollInertia,scrollEasing:"mcsEaseInOut",moveDragger:!1,timeout:60,callbacks:!0,onStart:!0,onUpdate:!0,onComplete:!0}
,s=e.extend(!0,{
}
,l,o),c=q.call(this,t),d=s.scrollInertia>0&&s.scrollInertia<17?17:s.scrollInertia;
	c[0]=Y.call(this,c[0],"y"),c[1]=Y.call(this,c[1],"x"),s.moveDragger&&(c[0]*=i.scrollRatio.y,c[1]*=i.scrollRatio.x),s.dur=oe()?0:d,setTimeout(function(){
	null!==c[0]&&"undefined"!=typeof c[0]&&"x"!==r.axis&&i.overflowed[0]&&(s.dir="y",s.overwrite="all",V(n,c[0].toString(),s)),null!==c[1]&&"undefined"!=typeof c[1]&&"y"!==r.axis&&i.overflowed[1]&&(s.dir="x",s.overwrite="none",V(n,c[1].toString(),s))}
,s.timeout)}
}
)}
}
,stop:function(){
	var t=f.call(this);
	return e(t).each(function(){
	var t=e(this);
	t.data(a)&&N(t)}
)}
,disable:function(t){
	var o=f.call(this);
	return e(o).each(function(){
	var o=e(this);
	if(o.data(a)){
	{
	o.data(a)}
X.call(this,"remove"),k.call(this),t&&B.call(this),M.call(this,!0),o.addClass(d[3])}
}
)}
,destroy:function(){
	var t=f.call(this);
	return e(t).each(function(){
	var n=e(this);
	if(n.data(a)){
	var i=n.data(a),r=i.opt,l=e("#mCSB_"+i.idx),s=e("#mCSB_"+i.idx+"_container"),c=e(".mCSB_"+i.idx+"_scrollbar");
	r.live&&m(r.liveSelector||e(t).selector),X.call(this,"remove"),k.call(this),B.call(this),n.removeData(a),K(this,"mcs"),c.remove(),s.find("img."+d[2]).removeClass(d[2]),l.replaceWith(s.contents()),n.removeClass(o+" _"+a+"_"+i.idx+" "+d[6]+" "+d[7]+" "+d[5]+" "+d[3]).addClass(d[4])}
}
)}
}
,f=function(){
	return"object"!=typeof e(this)||e(this).length<1?n:this}
,h=function(t){
	var o=["rounded","rounded-dark","rounded-dots","rounded-dots-dark"],a=["rounded-dots","rounded-dots-dark","3d","3d-dark","3d-thick","3d-thick-dark","inset","inset-dark","inset-2","inset-2-dark","inset-3","inset-3-dark"],n=["minimal","minimal-dark"],i=["minimal","minimal-dark"],r=["minimal","minimal-dark"];
	t.autoDraggerLength=e.inArray(t.theme,o)>-1?!1:t.autoDraggerLength,t.autoExpandScrollbar=e.inArray(t.theme,a)>-1?!1:t.autoExpandScrollbar,t.scrollButtons.enable=e.inArray(t.theme,n)>-1?!1:t.scrollButtons.enable,t.autoHideScrollbar=e.inArray(t.theme,i)>-1?!0:t.autoHideScrollbar,t.scrollbarPosition=e.inArray(t.theme,r)>-1?"outside":t.scrollbarPosition}
,m=function(e){
	l[e]&&(clearTimeout(l[e]),K(l,e))}
,p=function(e){
	return"yx"===e||"xy"===e||"auto"===e?"yx":"x"===e||"horizontal"===e?"x":"y"}
,g=function(e){
	return"stepped"===e||"pixels"===e||"step"===e||"click"===e?"stepped":"stepless"}
,v=function(){
	var t=e(this),n=t.data(a),i=n.opt,r=i.autoExpandScrollbar?" "+d[1]+"_expand":"",l=["<div id='mCSB_"+n.idx+"_scrollbar_vertical' class='mCSB_scrollTools mCSB_"+n.idx+"_scrollbar mCS-"+i.theme+" mCSB_scrollTools_vertical"+r+"'><div class='"+d[12]+"'><div id='mCSB_"+n.idx+"_dragger_vertical' class='mCSB_dragger' style='position:absolute;
	' oncontextmenu='return false;
	'><div class='mCSB_dragger_bar' /></div><div class='mCSB_draggerRail' /></div></div>","<div id='mCSB_"+n.idx+"_scrollbar_horizontal' class='mCSB_scrollTools mCSB_"+n.idx+"_scrollbar mCS-"+i.theme+" mCSB_scrollTools_horizontal"+r+"'><div class='"+d[12]+"'><div id='mCSB_"+n.idx+"_dragger_horizontal' class='mCSB_dragger' style='position:absolute;
	' oncontextmenu='return false;
	'><div class='mCSB_dragger_bar' /></div><div class='mCSB_draggerRail' /></div></div>"],s="yx"===i.axis?"mCSB_vertical_horizontal":"x"===i.axis?"mCSB_horizontal":"mCSB_vertical",c="yx"===i.axis?l[0]+l[1]:"x"===i.axis?l[1]:l[0],u="yx"===i.axis?"<div id='mCSB_"+n.idx+"_container_wrapper' class='mCSB_container_wrapper' />":"",f=i.autoHideScrollbar?" "+d[6]:"",h="x"!==i.axis&&"rtl"===n.langDir?" "+d[7]:"";
	i.setWidth&&t.css("width",i.setWidth),i.setHeight&&t.css("height",i.setHeight),i.setLeft="y"!==i.axis&&"rtl"===n.langDir?"989999px":i.setLeft,t.addClass(o+" _"+a+"_"+n.idx+f+h).wrapInner("<div id='mCSB_"+n.idx+"' class='mCustomScrollBox mCS-"+i.theme+" "+s+"'><div id='mCSB_"+n.idx+"_container' class='mCSB_container' style='position:relative;
	top:"+i.setTop+";
	left:"+i.setLeft+";
	' dir="+n.langDir+" /></div>");
	var m=e("#mCSB_"+n.idx),p=e("#mCSB_"+n.idx+"_container");
	"y"===i.axis||i.advanced.autoExpandHorizontalScroll||p.css("width",x(p)),"outside"===i.scrollbarPosition?("static"===t.css("position")&&t.css("position","relative"),t.css("overflow","visible"),m.addClass("mCSB_outside").after(c)):(m.addClass("mCSB_inside").append(c),p.wrap(u)),w.call(this);
	var g=[e("#mCSB_"+n.idx+"_dragger_vertical"),e("#mCSB_"+n.idx+"_dragger_horizontal")];
	g[0].css("min-height",g[0].height()),g[1].css("min-width",g[1].width())}
,x=function(t){
	var o=[t[0].scrollWidth,Math.max.apply(Math,t.children().map(function(){
	return e(this).outerWidth(!0)}
).get())],a=t.parent().width();
	return o[0]>a?o[0]:o[1]>a?o[1]:"100%"}
,_=function(){
	var t=e(this),o=t.data(a),n=o.opt,i=e("#mCSB_"+o.idx+"_container");
	if(n.advanced.autoExpandHorizontalScroll&&"y"!==n.axis){
	i.css({
	width:"auto","min-width":0,"overflow-x":"scroll"}
);
	var r=Math.ceil(i[0].scrollWidth);
	3===n.advanced.autoExpandHorizontalScroll||2!==n.advanced.autoExpandHorizontalScroll&&r>i.parent().width()?i.css({
	width:r,"min-width":"100%","overflow-x":"inherit"}
):i.css({
	"overflow-x":"inherit",position:"absolute"}
).wrap("<div class='mCSB_h_wrapper' style='position:relative;
	left:0;
	width:999999px;
	' />").css({
	width:Math.ceil(i[0].getBoundingClientRect().right+.4)-Math.floor(i[0].getBoundingClientRect().left),"min-width":"100%",position:"relative"}
).unwrap()}
}
,w=function(){
	var t=e(this),o=t.data(a),n=o.opt,i=e(".mCSB_"+o.idx+"_scrollbar:first"),r=ee(n.scrollButtons.tabindex)?"tabindex='"+n.scrollButtons.tabindex+"'":"",l=["<a href='#' class='"+d[13]+"' oncontextmenu='return false;
	' "+r+" />","<a href='#' class='"+d[14]+"' oncontextmenu='return false;
	' "+r+" />","<a href='#' class='"+d[15]+"' oncontextmenu='return false;
	' "+r+" />","<a href='#' class='"+d[16]+"' oncontextmenu='return false;
	' "+r+" />"],s=["x"===n.axis?l[2]:l[0],"x"===n.axis?l[3]:l[1],l[2],l[3]];
	n.scrollButtons.enable&&i.prepend(s[0]).append(s[1]).next(".mCSB_scrollTools").prepend(s[2]).append(s[3])}
,S=function(){
	var t=e(this),o=t.data(a),n=e("#mCSB_"+o.idx),i=e("#mCSB_"+o.idx+"_container"),r=[e("#mCSB_"+o.idx+"_dragger_vertical"),e("#mCSB_"+o.idx+"_dragger_horizontal")],l=[n.height()/i.outerHeight(!1),n.width()/i.outerWidth(!1)],c=[parseInt(r[0].css("min-height")),Math.round(l[0]*r[0].parent().height()),parseInt(r[1].css("min-width")),Math.round(l[1]*r[1].parent().width())],d=s&&c[1]<c[0]?c[0]:c[1],u=s&&c[3]<c[2]?c[2]:c[3];
	r[0].css({
	height:d,"max-height":r[0].parent().height()-10}
).find(".mCSB_dragger_bar").css({
	"line-height":c[0]+"px"}
),r[1].css({
	width:u,"max-width":r[1].parent().width()-10}
)}
,b=function(){
	var t=e(this),o=t.data(a),n=e("#mCSB_"+o.idx),i=e("#mCSB_"+o.idx+"_container"),r=[e("#mCSB_"+o.idx+"_dragger_vertical"),e("#mCSB_"+o.idx+"_dragger_horizontal")],l=[i.outerHeight(!1)-n.height(),i.outerWidth(!1)-n.width()],s=[l[0]/(r[0].parent().height()-r[0].height()),l[1]/(r[1].parent().width()-r[1].width())];
	o.scrollRatio={
	y:s[0],x:s[1]}
}
,C=function(e,t,o){
	var a=o?d[0]+"_expanded":"",n=e.closest(".mCSB_scrollTools");
	"active"===t?(e.toggleClass(d[0]+" "+a),n.toggleClass(d[1]),e[0]._draggable=e[0]._draggable?0:1):e[0]._draggable||("hide"===t?(e.removeClass(d[0]),n.removeClass(d[1])):(e.addClass(d[0]),n.addClass(d[1])))}
,y=function(){
	var t=e(this),o=t.data(a),n=e("#mCSB_"+o.idx),i=e("#mCSB_"+o.idx+"_container"),r=null==o.overflowed?i.height():i.outerHeight(!1),l=null==o.overflowed?i.width():i.outerWidth(!1),s=i[0].scrollHeight,c=i[0].scrollWidth;
	return s>r&&(r=s),c>l&&(l=c),[r>n.height(),l>n.width()]}
,B=function(){
	var t=e(this),o=t.data(a),n=o.opt,i=e("#mCSB_"+o.idx),r=e("#mCSB_"+o.idx+"_container"),l=[e("#mCSB_"+o.idx+"_dragger_vertical"),e("#mCSB_"+o.idx+"_dragger_horizontal")];
	if(N(t),("x"!==n.axis&&!o.overflowed[0]||"y"===n.axis&&o.overflowed[0])&&(l[0].add(r).css("top",0),V(t,"_resetY")),"y"!==n.axis&&!o.overflowed[1]||"x"===n.axis&&o.overflowed[1]){
	var s=dx=0;
	"rtl"===o.langDir&&(s=i.width()-r.outerWidth(!1),dx=Math.abs(s/o.scrollRatio.x)),r.css("left",s),l[1].css("left",dx),V(t,"_resetX")}
}
,T=function(){
	function t(){
	r=setTimeout(function(){
	e.event.special.mousewheel?(clearTimeout(r),R.call(o[0])):t()}
,100)}
var o=e(this),n=o.data(a),i=n.opt;
	if(!n.bindEvents){
	if(I.call(this),i.contentTouchScroll&&D.call(this),E.call(this),i.mouseWheel.enable){
	var r;
	t()}
L.call(this),P.call(this),i.advanced.autoScrollOnFocus&&z.call(this),i.scrollButtons.enable&&H.call(this),i.keyboard.enable&&U.call(this),n.bindEvents=!0}
}
,k=function(){
	var t=e(this),o=t.data(a),n=o.opt,i=a+"_"+o.idx,r=".mCSB_"+o.idx+"_scrollbar",l=e("#mCSB_"+o.idx+",#mCSB_"+o.idx+"_container,#mCSB_"+o.idx+"_container_wrapper,"+r+" ."+d[12]+",#mCSB_"+o.idx+"_dragger_vertical,#mCSB_"+o.idx+"_dragger_horizontal,"+r+">a"),s=e("#mCSB_"+o.idx+"_container");
	n.advanced.releaseDraggableSelectors&&l.add(e(n.advanced.releaseDraggableSelectors)),n.advanced.extraDraggableSelectors&&l.add(e(n.advanced.extraDraggableSelectors)),o.bindEvents&&(e(document).add(e(!W()||top.document)).unbind("."+i),l.each(function(){
	e(this).unbind("."+i)}
),clearTimeout(t[0]._focusTimeout),K(t[0],"_focusTimeout"),clearTimeout(o.sequential.step),K(o.sequential,"step"),clearTimeout(s[0].onCompleteTimeout),K(s[0],"onCompleteTimeout"),o.bindEvents=!1)}
,M=function(t){
	var o=e(this),n=o.data(a),i=n.opt,r=e("#mCSB_"+n.idx+"_container_wrapper"),l=r.length?r:e("#mCSB_"+n.idx+"_container"),s=[e("#mCSB_"+n.idx+"_scrollbar_vertical"),e("#mCSB_"+n.idx+"_scrollbar_horizontal")],c=[s[0].find(".mCSB_dragger"),s[1].find(".mCSB_dragger")];
	"x"!==i.axis&&(n.overflowed[0]&&!t?(s[0].add(c[0]).add(s[0].children("a")).css("display","block"),l.removeClass(d[8]+" "+d[10])):(i.alwaysShowScrollbar?(2!==i.alwaysShowScrollbar&&c[0].css("display","none"),l.removeClass(d[10])):(s[0].css("display","none"),l.addClass(d[10])),l.addClass(d[8]))),"y"!==i.axis&&(n.overflowed[1]&&!t?(s[1].add(c[1]).add(s[1].children("a")).css("display","block"),l.removeClass(d[9]+" "+d[11])):(i.alwaysShowScrollbar?(2!==i.alwaysShowScrollbar&&c[1].css("display","none"),l.removeClass(d[11])):(s[1].css("display","none"),l.addClass(d[11])),l.addClass(d[9]))),n.overflowed[0]||n.overflowed[1]?o.removeClass(d[5]):o.addClass(d[5])}
,O=function(t){
	var o=t.type,a=t.target.ownerDocument!==document?[e(frameElement).offset().top,e(frameElement).offset().left]:null,n=W()&&t.target.ownerDocument!==top.document?[e(t.view.frameElement).offset().top,e(t.view.frameElement).offset().left]:[0,0];
	switch(o){
	case"pointerdown":case"MSPointerDown":case"pointermove":case"MSPointerMove":case"pointerup":case"MSPointerUp":return a?[t.originalEvent.pageY-a[0]+n[0],t.originalEvent.pageX-a[1]+n[1],!1]:[t.originalEvent.pageY,t.originalEvent.pageX,!1];
	case"touchstart":case"touchmove":case"touchend":var i=t.originalEvent.touches[0]||t.originalEvent.changedTouches[0],r=t.originalEvent.touches.length||t.originalEvent.changedTouches.length;
	return t.target.ownerDocument!==document?[i.screenY,i.screenX,r>1]:[i.pageY,i.pageX,r>1];
	default:return a?[t.pageY-a[0]+n[0],t.pageX-a[1]+n[1],!1]:[t.pageY,t.pageX,!1]}
}
,I=function(){
	function t(e){
	var t=m.find("iframe");
	if(t.length){
	var o=e?"auto":"none";
	t.css("pointer-events",o)}
}
function o(e,t,o,a){
	if(m[0].idleTimer=u.scrollInertia<233?250:0,n.attr("id")===h[1])var i="x",r=(n[0].offsetLeft-t+a)*d.scrollRatio.x;
	else var i="y",r=(n[0].offsetTop-e+o)*d.scrollRatio.y;
	V(l,r.toString(),{
	dir:i,drag:!0}
)}
var n,i,r,l=e(this),d=l.data(a),u=d.opt,f=a+"_"+d.idx,h=["mCSB_"+d.idx+"_dragger_vertical","mCSB_"+d.idx+"_dragger_horizontal"],m=e("#mCSB_"+d.idx+"_container"),p=e("#"+h[0]+",#"+h[1]),g=u.advanced.releaseDraggableSelectors?p.add(e(u.advanced.releaseDraggableSelectors)):p,v=u.advanced.extraDraggableSelectors?e(!W()||top.document).add(e(u.advanced.extraDraggableSelectors)):e(!W()||top.document);
	p.bind("mousedown."+f+" touchstart."+f+" pointerdown."+f+" MSPointerDown."+f,function(o){
	if(o.stopImmediatePropagation(),o.preventDefault(),Z(o)){
	c=!0,s&&(document.onselectstart=function(){
	return!1}
),t(!1),N(l),n=e(this);
	var a=n.offset(),d=O(o)[0]-a.top,f=O(o)[1]-a.left,h=n.height()+a.top,m=n.width()+a.left;
	h>d&&d>0&&m>f&&f>0&&(i=d,r=f),C(n,"active",u.autoExpandScrollbar)}
}
).bind("touchmove."+f,function(e){
	e.stopImmediatePropagation(),e.preventDefault();
	var t=n.offset(),a=O(e)[0]-t.top,l=O(e)[1]-t.left;
	o(i,r,a,l)}
),e(document).add(v).bind("mousemove."+f+" pointermove."+f+" MSPointerMove."+f,function(e){
	if(n){
	var t=n.offset(),a=O(e)[0]-t.top,l=O(e)[1]-t.left;
	if(i===a&&r===l)return;
	o(i,r,a,l)}
}
).add(g).bind("mouseup."+f+" touchend."+f+" pointerup."+f+" MSPointerUp."+f,function(e){
	n&&(C(n,"active",u.autoExpandScrollbar),n=null),c=!1,s&&(document.onselectstart=null),t(!0)}
)}
,D=function(){
	function o(e){
	if(!$(e)||c||O(e)[2])return void(t=0);
	t=1,b=0,C=0,d=1,y.removeClass("mCS_touch_action");
	var o=I.offset();
	u=O(e)[0]-o.top,f=O(e)[1]-o.left,z=[O(e)[0],O(e)[1]]}
function n(e){
	if($(e)&&!c&&!O(e)[2]&&(T.documentTouchScroll||e.preventDefault(),e.stopImmediatePropagation(),(!C||b)&&d)){
	g=G();
	var t=M.offset(),o=O(e)[0]-t.top,a=O(e)[1]-t.left,n="mcsLinearOut";
	if(E.push(o),R.push(a),z[2]=Math.abs(O(e)[0]-z[0]),z[3]=Math.abs(O(e)[1]-z[1]),B.overflowed[0])var i=D[0].parent().height()-D[0].height(),r=u-o>0&&o-u>-(i*B.scrollRatio.y)&&(2*z[3]<z[2]||"yx"===T.axis);
	if(B.overflowed[1])var l=D[1].parent().width()-D[1].width(),h=f-a>0&&a-f>-(l*B.scrollRatio.x)&&(2*z[2]<z[3]||"yx"===T.axis);
	r||h?(U||e.preventDefault(),b=1):(C=1,y.addClass("mCS_touch_action")),U&&e.preventDefault(),w="yx"===T.axis?[u-o,f-a]:"x"===T.axis?[null,f-a]:[u-o,null],I[0].idleTimer=250,B.overflowed[0]&&s(w[0],A,n,"y","all",!0),B.overflowed[1]&&s(w[1],A,n,"x",L,!0)}
}
function i(e){
	if(!$(e)||c||O(e)[2])return void(t=0);
	t=1,e.stopImmediatePropagation(),N(y),p=G();
	var o=M.offset();
	h=O(e)[0]-o.top,m=O(e)[1]-o.left,E=[],R=[]}
function r(e){
	if($(e)&&!c&&!O(e)[2]){
	d=0,e.stopImmediatePropagation(),b=0,C=0,v=G();
	var t=M.offset(),o=O(e)[0]-t.top,a=O(e)[1]-t.left;
	if(!(v-g>30)){
	_=1e3/(v-p);
	var n="mcsEaseOut",i=2.5>_,r=i?[E[E.length-2],R[R.length-2]]:[0,0];
	x=i?[o-r[0],a-r[1]]:[o-h,a-m];
	var u=[Math.abs(x[0]),Math.abs(x[1])];
	_=i?[Math.abs(x[0]/4),Math.abs(x[1]/4)]:[_,_];
	var f=[Math.abs(I[0].offsetTop)-x[0]*l(u[0]/_[0],_[0]),Math.abs(I[0].offsetLeft)-x[1]*l(u[1]/_[1],_[1])];
	w="yx"===T.axis?[f[0],f[1]]:"x"===T.axis?[null,f[1]]:[f[0],null],S=[4*u[0]+T.scrollInertia,4*u[1]+T.scrollInertia];
	var y=parseInt(T.contentTouchScroll)||0;
	w[0]=u[0]>y?w[0]:0,w[1]=u[1]>y?w[1]:0,B.overflowed[0]&&s(w[0],S[0],n,"y",L,!1),B.overflowed[1]&&s(w[1],S[1],n,"x",L,!1)}
}
}
function l(e,t){
	var o=[1.5*t,2*t,t/1.5,t/2];
	return e>90?t>4?o[0]:o[3]:e>60?t>3?o[3]:o[2]:e>30?t>8?o[1]:t>6?o[0]:t>4?t:o[2]:t>8?t:o[3]}
function s(e,t,o,a,n,i){
	e&&V(y,e.toString(),{
	dur:t,scrollEasing:o,dir:a,overwrite:n,drag:i}
)}
var d,u,f,h,m,p,g,v,x,_,w,S,b,C,y=e(this),B=y.data(a),T=B.opt,k=a+"_"+B.idx,M=e("#mCSB_"+B.idx),I=e("#mCSB_"+B.idx+"_container"),D=[e("#mCSB_"+B.idx+"_dragger_vertical"),e("#mCSB_"+B.idx+"_dragger_horizontal")],E=[],R=[],A=0,L="yx"===T.axis?"none":"all",z=[],P=I.find("iframe"),H=["touchstart."+k+" pointerdown."+k+" MSPointerDown."+k,"touchmove."+k+" pointermove."+k+" MSPointerMove."+k,"touchend."+k+" pointerup."+k+" MSPointerUp."+k],U=void 0!==document.body.style.touchAction;
	I.bind(H[0],function(e){
	o(e)}
).bind(H[1],function(e){
	n(e)}
),M.bind(H[0],function(e){
	i(e)}
).bind(H[2],function(e){
	r(e)}
),P.length&&P.each(function(){
	e(this).load(function(){
	W(this)&&e(this.contentDocument||this.contentWindow.document).bind(H[0],function(e){
	o(e),i(e)}
).bind(H[1],function(e){
	n(e)}
).bind(H[2],function(e){
	r(e)}
)}
)}
)}
,E=function(){
	function o(){
	return window.getSelection?window.getSelection().toString():document.selection&&"Control"!=document.selection.type?document.selection.createRange().text:0}
function n(e,t,o){
	d.type=o&&i?"stepped":"stepless",d.scrollAmount=10,F(r,e,t,"mcsLinearOut",o?60:null)}
var i,r=e(this),l=r.data(a),s=l.opt,d=l.sequential,u=a+"_"+l.idx,f=e("#mCSB_"+l.idx+"_container"),h=f.parent();
	f.bind("mousedown."+u,function(e){
	t||i||(i=1,c=!0)}
).add(document).bind("mousemove."+u,function(e){
	if(!t&&i&&o()){
	var a=f.offset(),r=O(e)[0]-a.top+f[0].offsetTop,c=O(e)[1]-a.left+f[0].offsetLeft;
	r>0&&r<h.height()&&c>0&&c<h.width()?d.step&&n("off",null,"stepped"):("x"!==s.axis&&l.overflowed[0]&&(0>r?n("on",38):r>h.height()&&n("on",40)),"y"!==s.axis&&l.overflowed[1]&&(0>c?n("on",37):c>h.width()&&n("on",39)))}
}
).bind("mouseup."+u+" dragend."+u,function(e){
	t||(i&&(i=0,n("off",null)),c=!1)}
)}
,R=function(){
	function t(t,a){
	if(N(o),!A(o,t.target)){
	var r="auto"!==i.mouseWheel.deltaFactor?parseInt(i.mouseWheel.deltaFactor):s&&t.deltaFactor<100?100:t.deltaFactor||100,d=i.scrollInertia;
	if("x"===i.axis||"x"===i.mouseWheel.axis)var u="x",f=[Math.round(r*n.scrollRatio.x),parseInt(i.mouseWheel.scrollAmount)],h="auto"!==i.mouseWheel.scrollAmount?f[1]:f[0]>=l.width()?.9*l.width():f[0],m=Math.abs(e("#mCSB_"+n.idx+"_container")[0].offsetLeft),p=c[1][0].offsetLeft,g=c[1].parent().width()-c[1].width(),v=t.deltaX||t.deltaY||a;
	else var u="y",f=[Math.round(r*n.scrollRatio.y),parseInt(i.mouseWheel.scrollAmount)],h="auto"!==i.mouseWheel.scrollAmount?f[1]:f[0]>=l.height()?.9*l.height():f[0],m=Math.abs(e("#mCSB_"+n.idx+"_container")[0].offsetTop),p=c[0][0].offsetTop,g=c[0].parent().height()-c[0].height(),v=t.deltaY||a;
	"y"===u&&!n.overflowed[0]||"x"===u&&!n.overflowed[1]||((i.mouseWheel.invert||t.webkitDirectionInvertedFromDevice)&&(v=-v),i.mouseWheel.normalizeDelta&&(v=0>v?-1:1),(v>0&&0!==p||0>v&&p!==g||i.mouseWheel.preventDefault)&&(t.stopImmediatePropagation(),t.preventDefault()),t.deltaFactor<2&&!i.mouseWheel.normalizeDelta&&(h=t.deltaFactor,d=17),V(o,(m-v*h).toString(),{
	dir:u,dur:d}
))}
}
if(e(this).data(a)){
	var o=e(this),n=o.data(a),i=n.opt,r=a+"_"+n.idx,l=e("#mCSB_"+n.idx),c=[e("#mCSB_"+n.idx+"_dragger_vertical"),e("#mCSB_"+n.idx+"_dragger_horizontal")],d=e("#mCSB_"+n.idx+"_container").find("iframe");
	d.length&&d.each(function(){
	e(this).load(function(){
	W(this)&&e(this.contentDocument||this.contentWindow.document).bind("mousewheel."+r,function(e,o){
	t(e,o)}
)}
)}
),l.bind("mousewheel."+r,function(e,o){
	t(e,o)}
)}
}
,W=function(e){
	var t=null;
	if(e){
	try{
	var o=e.contentDocument||e.contentWindow.document;
	t=o.body.innerHTML}
catch(a){
}
return null!==t}
try{
	var o=top.document;
	t=o.body.innerHTML}
catch(a){
}
return null!==t}
,A=function(t,o){
	var n=o.nodeName.toLowerCase(),i=t.data(a).opt.mouseWheel.disableOver,r=["select","textarea"];
	return e.inArray(n,i)>-1&&!(e.inArray(n,r)>-1&&!e(o).is(":focus"))}
,L=function(){
	var t,o=e(this),n=o.data(a),i=a+"_"+n.idx,r=e("#mCSB_"+n.idx+"_container"),l=r.parent(),s=e(".mCSB_"+n.idx+"_scrollbar ."+d[12]);
	s.bind("mousedown."+i+" touchstart."+i+" pointerdown."+i+" MSPointerDown."+i,function(o){
	c=!0,e(o.target).hasClass("mCSB_dragger")||(t=1)}
).bind("touchend."+i+" pointerup."+i+" MSPointerUp."+i,function(e){
	c=!1}
).bind("click."+i,function(a){
	if(t&&(t=0,e(a.target).hasClass(d[12])||e(a.target).hasClass("mCSB_draggerRail"))){
	N(o);
	var i=e(this),s=i.find(".mCSB_dragger");
	if(i.parent(".mCSB_scrollTools_horizontal").length>0){
	if(!n.overflowed[1])return;
	var c="x",u=a.pageX>s.offset().left?-1:1,f=Math.abs(r[0].offsetLeft)-.9*u*l.width()}
else{
	if(!n.overflowed[0])return;
	var c="y",u=a.pageY>s.offset().top?-1:1,f=Math.abs(r[0].offsetTop)-.9*u*l.height()}
V(o,f.toString(),{
	dir:c,scrollEasing:"mcsEaseInOut"}
)}
}
)}
,z=function(){
	var t=e(this),o=t.data(a),n=o.opt,i=a+"_"+o.idx,r=e("#mCSB_"+o.idx+"_container"),l=r.parent();
	r.bind("focusin."+i,function(o){
	var a=e(document.activeElement),i=r.find(".mCustomScrollBox").length,s=0;
	a.is(n.advanced.autoScrollOnFocus)&&(N(t),clearTimeout(t[0]._focusTimeout),t[0]._focusTimer=i?(s+17)*i:0,t[0]._focusTimeout=setTimeout(function(){
	var e=[te(a)[0],te(a)[1]],o=[r[0].offsetTop,r[0].offsetLeft],i=[o[0]+e[0]>=0&&o[0]+e[0]<l.height()-a.outerHeight(!1),o[1]+e[1]>=0&&o[0]+e[1]<l.width()-a.outerWidth(!1)],c="yx"!==n.axis||i[0]||i[1]?"all":"none";
	"x"===n.axis||i[0]||V(t,e[0].toString(),{
	dir:"y",scrollEasing:"mcsEaseInOut",overwrite:c,dur:s}
),"y"===n.axis||i[1]||V(t,e[1].toString(),{
	dir:"x",scrollEasing:"mcsEaseInOut",overwrite:c,dur:s}
)}
,t[0]._focusTimer))}
)}
,P=function(){
	var t=e(this),o=t.data(a),n=a+"_"+o.idx,i=e("#mCSB_"+o.idx+"_container").parent();
	i.bind("scroll."+n,function(t){
	(0!==i.scrollTop()||0!==i.scrollLeft())&&e(".mCSB_"+o.idx+"_scrollbar").css("visibility","hidden")}
)}
,H=function(){
	var t=e(this),o=t.data(a),n=o.opt,i=o.sequential,r=a+"_"+o.idx,l=".mCSB_"+o.idx+"_scrollbar",s=e(l+">a");
	s.bind("mousedown."+r+" touchstart."+r+" pointerdown."+r+" MSPointerDown."+r+" mouseup."+r+" touchend."+r+" pointerup."+r+" MSPointerUp."+r+" mouseout."+r+" pointerout."+r+" MSPointerOut."+r+" click."+r,function(a){
	function r(e,o){
	i.scrollAmount=n.scrollButtons.scrollAmount,F(t,e,o)}
if(a.preventDefault(),Z(a)){
	var l=e(this).attr("class");
	switch(i.type=n.scrollButtons.scrollType,a.type){
	case"mousedown":case"touchstart":case"pointerdown":case"MSPointerDown":if("stepped"===i.type)return;
	c=!0,o.tweenRunning=!1,r("on",l);
	break;
	case"mouseup":case"touchend":case"pointerup":case"MSPointerUp":case"mouseout":case"pointerout":case"MSPointerOut":if("stepped"===i.type)return;
	c=!1,i.dir&&r("off",l);
	break;
	case"click":if("stepped"!==i.type||o.tweenRunning)return;
	r("on",l)}
}
}
)}
,U=function(){
	function t(t){
	function a(e,t){
	r.type=i.keyboard.scrollType,r.scrollAmount=i.keyboard.scrollAmount,"stepped"===r.type&&n.tweenRunning||F(o,e,t)}
switch(t.type){
	case"blur":n.tweenRunning&&r.dir&&a("off",null);
	break;
	case"keydown":case"keyup":var l=t.keyCode?t.keyCode:t.which,s="on";
	if("x"!==i.axis&&(38===l||40===l)||"y"!==i.axis&&(37===l||39===l)){
	if((38===l||40===l)&&!n.overflowed[0]||(37===l||39===l)&&!n.overflowed[1])return;
	"keyup"===t.type&&(s="off"),e(document.activeElement).is(u)||(t.preventDefault(),t.stopImmediatePropagation(),a(s,l))}
else if(33===l||34===l){
	if((n.overflowed[0]||n.overflowed[1])&&(t.preventDefault(),t.stopImmediatePropagation()),"keyup"===t.type){
	N(o);
	var f=34===l?-1:1;
	if("x"===i.axis||"yx"===i.axis&&n.overflowed[1]&&!n.overflowed[0])var h="x",m=Math.abs(c[0].offsetLeft)-.9*f*d.width();
	else var h="y",m=Math.abs(c[0].offsetTop)-.9*f*d.height();
	V(o,m.toString(),{
	dir:h,scrollEasing:"mcsEaseInOut"}
)}
}
else if((35===l||36===l)&&!e(document.activeElement).is(u)&&((n.overflowed[0]||n.overflowed[1])&&(t.preventDefault(),t.stopImmediatePropagation()),"keyup"===t.type)){
	if("x"===i.axis||"yx"===i.axis&&n.overflowed[1]&&!n.overflowed[0])var h="x",m=35===l?Math.abs(d.width()-c.outerWidth(!1)):0;
	else var h="y",m=35===l?Math.abs(d.height()-c.outerHeight(!1)):0;
	V(o,m.toString(),{
	dir:h,scrollEasing:"mcsEaseInOut"}
)}
}
}
var o=e(this),n=o.data(a),i=n.opt,r=n.sequential,l=a+"_"+n.idx,s=e("#mCSB_"+n.idx),c=e("#mCSB_"+n.idx+"_container"),d=c.parent(),u="input,textarea,select,datalist,keygen,[contenteditable='true']",f=c.find("iframe"),h=["blur."+l+" keydown."+l+" keyup."+l];
	f.length&&f.each(function(){
	e(this).load(function(){
	W(this)&&e(this.contentDocument||this.contentWindow.document).bind(h[0],function(e){
	t(e)}
)}
)}
),s.attr("tabindex","0").bind(h[0],function(e){
	t(e)}
)}
,F=function(t,o,n,i,r){
	function l(e){
	u.snapAmount&&(f.scrollAmount=u.snapAmount instanceof Array?"x"===f.dir[0]?u.snapAmount[1]:u.snapAmount[0]:u.snapAmount);
	var o="stepped"!==f.type,a=r?r:e?o?p/1.5:g:1e3/60,n=e?o?7.5:40:2.5,s=[Math.abs(h[0].offsetTop),Math.abs(h[0].offsetLeft)],d=[c.scrollRatio.y>10?10:c.scrollRatio.y,c.scrollRatio.x>10?10:c.scrollRatio.x],m="x"===f.dir[0]?s[1]+f.dir[1]*d[1]*n:s[0]+f.dir[1]*d[0]*n,v="x"===f.dir[0]?s[1]+f.dir[1]*parseInt(f.scrollAmount):s[0]+f.dir[1]*parseInt(f.scrollAmount),x="auto"!==f.scrollAmount?v:m,_=i?i:e?o?"mcsLinearOut":"mcsEaseInOut":"mcsLinear",w=e?!0:!1;
	return e&&17>a&&(x="x"===f.dir[0]?s[1]:s[0]),V(t,x.toString(),{
	dir:f.dir[0],scrollEasing:_,dur:a,onComplete:w}
),e?void(f.dir=!1):(clearTimeout(f.step),void(f.step=setTimeout(function(){
	l()}
,a)))}
function s(){
	clearTimeout(f.step),K(f,"step"),N(t)}
var c=t.data(a),u=c.opt,f=c.sequential,h=e("#mCSB_"+c.idx+"_container"),m="stepped"===f.type?!0:!1,p=u.scrollInertia<26?26:u.scrollInertia,g=u.scrollInertia<1?17:u.scrollInertia;
	switch(o){
	case"on":if(f.dir=[n===d[16]||n===d[15]||39===n||37===n?"x":"y",n===d[13]||n===d[15]||38===n||37===n?-1:1],N(t),ee(n)&&"stepped"===f.type)return;
	l(m);
	break;
	case"off":s(),(m||c.tweenRunning&&f.dir)&&l(!0)}
}
,q=function(t){
	var o=e(this).data(a).opt,n=[];
	return"function"==typeof t&&(t=t()),t instanceof Array?n=t.length>1?[t[0],t[1]]:"x"===o.axis?[null,t[0]]:[t[0],null]:(n[0]=t.y?t.y:t.x||"x"===o.axis?null:t,n[1]=t.x?t.x:t.y||"y"===o.axis?null:t),"function"==typeof n[0]&&(n[0]=n[0]()),"function"==typeof n[1]&&(n[1]=n[1]()),n}
,Y=function(t,o){
	if(null!=t&&"undefined"!=typeof t){
	var n=e(this),i=n.data(a),r=i.opt,l=e("#mCSB_"+i.idx+"_container"),s=l.parent(),c=typeof t;
	o||(o="x"===r.axis?"x":"y");
	var d="x"===o?l.outerWidth(!1):l.outerHeight(!1),f="x"===o?l[0].offsetLeft:l[0].offsetTop,h="x"===o?"left":"top";
	switch(c){
	case"function":return t();
	case"object":var m=t.jquery?t:e(t);
	if(!m.length)return;
	return"x"===o?te(m)[1]:te(m)[0];
	case"string":case"number":if(ee(t))return Math.abs(t);
	if(-1!==t.indexOf("%"))return Math.abs(d*parseInt(t)/100);
	if(-1!==t.indexOf("-="))return Math.abs(f-parseInt(t.split("-=")[1]));
	if(-1!==t.indexOf("+=")){
	var p=f+parseInt(t.split("+=")[1]);
	return p>=0?0:Math.abs(p)}
if(-1!==t.indexOf("px")&&ee(t.split("px")[0]))return Math.abs(t.split("px")[0]);
	if("top"===t||"left"===t)return 0;
	if("bottom"===t)return Math.abs(s.height()-l.outerHeight(!1));
	if("right"===t)return Math.abs(s.width()-l.outerWidth(!1));
	if("first"===t||"last"===t){
	var m=l.find(":"+t);
	return"x"===o?te(m)[1]:te(m)[0]}
return e(t).length?"x"===o?te(e(t))[1]:te(e(t))[0]:(l.css(h,t),void u.update.call(null,n[0]))}
}
}
,X=function(t){
	function o(){
	return clearTimeout(f[0].autoUpdate),0===l.parents("html").length?void(l=null):void(f[0].autoUpdate=setTimeout(function(){
	return c.advanced.updateOnSelectorChange&&(s.poll.change.n=i(),s.poll.change.n!==s.poll.change.o)?(s.poll.change.o=s.poll.change.n,void r(3)):c.advanced.updateOnContentResize&&(s.poll.size.n=l[0].scrollHeight+l[0].scrollWidth+f[0].offsetHeight+l[0].offsetHeight+l[0].offsetWidth,s.poll.size.n!==s.poll.size.o)?(s.poll.size.o=s.poll.size.n,void r(1)):!c.advanced.updateOnImageLoad||"auto"===c.advanced.updateOnImageLoad&&"y"===c.axis||(s.poll.img.n=f.find("img").length,s.poll.img.n===s.poll.img.o)?void((c.advanced.updateOnSelectorChange||c.advanced.updateOnContentResize||c.advanced.updateOnImageLoad)&&o()):(s.poll.img.o=s.poll.img.n,void f.find("img").each(function(){
	n(this)}
))}
,c.advanced.autoUpdateTimeout))}
function n(t){
	function o(e,t){
	return function(){
	return t.apply(e,arguments)}
}
function a(){
	this.onload=null,e(t).addClass(d[2]),r(2)}
if(e(t).hasClass(d[2]))return void r();
	var n=new Image;
	n.onload=o(n,a),n.src=t.src}
function i(){
	c.advanced.updateOnSelectorChange===!0&&(c.advanced.updateOnSelectorChange="*");
	var e=0,t=f.find(c.advanced.updateOnSelectorChange);
	return c.advanced.updateOnSelectorChange&&t.length>0&&t.each(function(){
	e+=this.offsetHeight+this.offsetWidth}
),e}
function r(e){
	clearTimeout(f[0].autoUpdate),u.update.call(null,l[0],e)}
var l=e(this),s=l.data(a),c=s.opt,f=e("#mCSB_"+s.idx+"_container");
	return t?(clearTimeout(f[0].autoUpdate),void K(f[0],"autoUpdate")):void o()}
,j=function(e,t,o){
	return Math.round(e/t)*t-o}
,N=function(t){
	var o=t.data(a),n=e("#mCSB_"+o.idx+"_container,#mCSB_"+o.idx+"_container_wrapper,#mCSB_"+o.idx+"_dragger_vertical,#mCSB_"+o.idx+"_dragger_horizontal");
	n.each(function(){
	J.call(this)}
)}
,V=function(t,o,n){
	function i(e){
	return s&&c.callbacks[e]&&"function"==typeof c.callbacks[e]}
function r(){
	return[c.callbacks.alwaysTriggerOffsets||w>=S[0]+y,c.callbacks.alwaysTriggerOffsets||-B>=w]}
function l(){
	var e=[h[0].offsetTop,h[0].offsetLeft],o=[x[0].offsetTop,x[0].offsetLeft],a=[h.outerHeight(!1),h.outerWidth(!1)],i=[f.height(),f.width()];
	t[0].mcs={
	content:h,top:e[0],left:e[1],draggerTop:o[0],draggerLeft:o[1],topPct:Math.round(100*Math.abs(e[0])/(Math.abs(a[0])-i[0])),leftPct:Math.round(100*Math.abs(e[1])/(Math.abs(a[1])-i[1])),direction:n.dir}
}
var s=t.data(a),c=s.opt,d={
	trigger:"internal",dir:"y",scrollEasing:"mcsEaseOut",drag:!1,dur:c.scrollInertia,overwrite:"all",callbacks:!0,onStart:!0,onUpdate:!0,onComplete:!0}
,n=e.extend(d,n),u=[n.dur,n.drag?0:n.dur],f=e("#mCSB_"+s.idx),h=e("#mCSB_"+s.idx+"_container"),m=h.parent(),p=c.callbacks.onTotalScrollOffset?q.call(t,c.callbacks.onTotalScrollOffset):[0,0],g=c.callbacks.onTotalScrollBackOffset?q.call(t,c.callbacks.onTotalScrollBackOffset):[0,0];
	if(s.trigger=n.trigger,(0!==m.scrollTop()||0!==m.scrollLeft())&&(e(".mCSB_"+s.idx+"_scrollbar").css("visibility","visible"),m.scrollTop(0).scrollLeft(0)),"_resetY"!==o||s.contentReset.y||(i("onOverflowYNone")&&c.callbacks.onOverflowYNone.call(t[0]),s.contentReset.y=1),"_resetX"!==o||s.contentReset.x||(i("onOverflowXNone")&&c.callbacks.onOverflowXNone.call(t[0]),s.contentReset.x=1),"_resetY"!==o&&"_resetX"!==o){
	if(!s.contentReset.y&&t[0].mcs||!s.overflowed[0]||(i("onOverflowY")&&c.callbacks.onOverflowY.call(t[0]),s.contentReset.x=null),!s.contentReset.x&&t[0].mcs||!s.overflowed[1]||(i("onOverflowX")&&c.callbacks.onOverflowX.call(t[0]),s.contentReset.x=null),c.snapAmount){
	var v=c.snapAmount instanceof Array?"x"===n.dir?c.snapAmount[1]:c.snapAmount[0]:c.snapAmount;
	o=j(o,v,c.snapOffset)}
switch(n.dir){
	case"x":var x=e("#mCSB_"+s.idx+"_dragger_horizontal"),_="left",w=h[0].offsetLeft,S=[f.width()-h.outerWidth(!1),x.parent().width()-x.width()],b=[o,0===o?0:o/s.scrollRatio.x],y=p[1],B=g[1],T=y>0?y/s.scrollRatio.x:0,k=B>0?B/s.scrollRatio.x:0;
	break;
	case"y":var x=e("#mCSB_"+s.idx+"_dragger_vertical"),_="top",w=h[0].offsetTop,S=[f.height()-h.outerHeight(!1),x.parent().height()-x.height()],b=[o,0===o?0:o/s.scrollRatio.y],y=p[0],B=g[0],T=y>0?y/s.scrollRatio.y:0,k=B>0?B/s.scrollRatio.y:0}
b[1]<0||0===b[0]&&0===b[1]?b=[0,0]:b[1]>=S[1]?b=[S[0],S[1]]:b[0]=-b[0],t[0].mcs||(l(),i("onInit")&&c.callbacks.onInit.call(t[0])),clearTimeout(h[0].onCompleteTimeout),Q(x[0],_,Math.round(b[1]),u[1],n.scrollEasing),(s.tweenRunning||!(0===w&&b[0]>=0||w===S[0]&&b[0]<=S[0]))&&Q(h[0],_,Math.round(b[0]),u[0],n.scrollEasing,n.overwrite,{
	onStart:function(){
	n.callbacks&&n.onStart&&!s.tweenRunning&&(i("onScrollStart")&&(l(),c.callbacks.onScrollStart.call(t[0])),s.tweenRunning=!0,C(x),s.cbOffsets=r())}
,onUpdate:function(){
	n.callbacks&&n.onUpdate&&i("whileScrolling")&&(l(),c.callbacks.whileScrolling.call(t[0]))}
,onComplete:function(){
	if(n.callbacks&&n.onComplete){
	"yx"===c.axis&&clearTimeout(h[0].onCompleteTimeout);
	var e=h[0].idleTimer||0;
	h[0].onCompleteTimeout=setTimeout(function(){
	i("onScroll")&&(l(),c.callbacks.onScroll.call(t[0])),i("onTotalScroll")&&b[1]>=S[1]-T&&s.cbOffsets[0]&&(l(),c.callbacks.onTotalScroll.call(t[0])),i("onTotalScrollBack")&&b[1]<=k&&s.cbOffsets[1]&&(l(),c.callbacks.onTotalScrollBack.call(t[0])),s.tweenRunning=!1,h[0].idleTimer=0,C(x,"hide")}
,e)}
}
}
)}
}
,Q=function(e,t,o,a,n,i,r){
	function l(){
	S.stop||(x||m.call(),x=G()-v,s(),x>=S.time&&(S.time=x>S.time?x+f-(x-S.time):x+f-1,S.time<x+1&&(S.time=x+1)),S.time<a?S.id=h(l):g.call())}
function s(){
	a>0?(S.currVal=u(S.time,_,b,a,n),w[t]=Math.round(S.currVal)+"px"):w[t]=o+"px",p.call()}
function c(){
	f=1e3/60,S.time=x+f,h=window.requestAnimationFrame?window.requestAnimationFrame:function(e){
	return s(),setTimeout(e,.01)}
,S.id=h(l)}
function d(){
	null!=S.id&&(window.requestAnimationFrame?window.cancelAnimationFrame(S.id):clearTimeout(S.id),S.id=null)}
function u(e,t,o,a,n){
	switch(n){
	case"linear":case"mcsLinear":return o*e/a+t;
	case"mcsLinearOut":return e/=a,e--,o*Math.sqrt(1-e*e)+t;
	case"easeInOutSmooth":return e/=a/2,1>e?o/2*e*e+t:(e--,-o/2*(e*(e-2)-1)+t);
	case"easeInOutStrong":return e/=a/2,1>e?o/2*Math.pow(2,10*(e-1))+t:(e--,o/2*(-Math.pow(2,-10*e)+2)+t);
	case"easeInOut":case"mcsEaseInOut":return e/=a/2,1>e?o/2*e*e*e+t:(e-=2,o/2*(e*e*e+2)+t);
	case"easeOutSmooth":return e/=a,e--,-o*(e*e*e*e-1)+t;
	case"easeOutStrong":return o*(-Math.pow(2,-10*e/a)+1)+t;
	case"easeOut":case"mcsEaseOut":default:var i=(e/=a)*e,r=i*e;
	return t+o*(.499999999999997*r*i+-2.5*i*i+5.5*r+-6.5*i+4*e)}
}
e._mTween||(e._mTween={
	top:{
}
,left:{
}
}
);
	var f,h,r=r||{
}
,m=r.onStart||function(){
}
,p=r.onUpdate||function(){
}
,g=r.onComplete||function(){
}
,v=G(),x=0,_=e.offsetTop,w=e.style,S=e._mTween[t];
	"left"===t&&(_=e.offsetLeft);
	var b=o-_;
	S.stop=0,"none"!==i&&d(),c()}
,G=function(){
	return window.performance&&window.performance.now?window.performance.now():window.performance&&window.performance.webkitNow?window.performance.webkitNow():Date.now?Date.now():(new Date).getTime()}
,J=function(){
	var e=this;
	e._mTween||(e._mTween={
	top:{
}
,left:{
}
}
);
	for(var t=["top","left"],o=0;
	o<t.length;
	o++){
	var a=t[o];
	e._mTween[a].id&&(window.requestAnimationFrame?window.cancelAnimationFrame(e._mTween[a].id):clearTimeout(e._mTween[a].id),e._mTween[a].id=null,e._mTween[a].stop=1)}
}
,K=function(e,t){
	try{
	delete e[t]}
catch(o){
	e[t]=null}
}
,Z=function(e){
	return!(e.which&&1!==e.which)}
,$=function(e){
	var t=e.originalEvent.pointerType;
	return!(t&&"touch"!==t&&2!==t)}
,ee=function(e){
	return!isNaN(parseFloat(e))&&isFinite(e)}
,te=function(e){
	var t=e.parents(".mCSB_container");
	return[e.offset().top-t.offset().top,e.offset().left-t.offset().left]}
,oe=function(){
	function e(){
	var e=["webkit","moz","ms","o"];
	if("hidden"in document)return"hidden";
	for(var t=0;
	t<e.length;
	t++)if(e[t]+"Hidden"in document)return e[t]+"Hidden";
	return null}
var t=e();
	return t?document[t]:!1}
;
	e.fn[o]=function(t){
	return u[t]?u[t].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof t&&t?void e.error("Method "+t+" does not exist"):u.init.apply(this,arguments)}
,e[o]=function(t){
	return u[t]?u[t].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof t&&t?void e.error("Method "+t+" does not exist"):u.init.apply(this,arguments)}
,e[o].defaults=i,window[o]=!0,e(window).load(function(){
	e(n)[o](),e.extend(e.expr[":"],{
	mcsInView:e.expr[":"].mcsInView||function(t){
	var o,a,n=e(t),i=n.parents(".mCSB_container");
	if(i.length)return o=i.parent(),a=[i[0].offsetTop,i[0].offsetLeft],a[0]+te(n)[0]>=0&&a[0]+te(n)[0]<o.height()-n.outerHeight(!1)&&a[1]+te(n)[1]>=0&&a[1]+te(n)[1]<o.width()-n.outerWidth(!1)}
,mcsOverflow:e.expr[":"].mcsOverflow||function(t){
	var o=e(t).data(a);
	if(o)return o.overflowed[0]||o.overflowed[1]}
}
)}
)}
)}
);

JS代码(jquery.select.js):

//版本 1.0//作者：聂未;
	(function ($,window,document,undefined){
	$.fn.extend({
	select:function (options){
	//默认参数 var defaults ={
	width:"180px",//生成的select框宽度 listMaxHeight:"200px",//生成的下拉列表最大高度 themeColor:"#00bb9c",//主题颜色 fontColor:"#000",//字体颜色 fontFamily:"'Helvetica Neue',arial,sans-serif",//字体种类 fontSize:"15px",//字体大小 showSearch:false,//是否启用搜索框 rowColor:"#fff",//行原本的颜色 rowHoverColor:"#0faf03",//移动选择时，每一行的hover底色 fontHoverColor:"#fff",//移动选择时，每一行的字体hover颜色 mainContent:"请选择",//选择显示框的默认文字 searchContent:"关键词搜索" //搜索框的默认提示文字}
//将默认的参数对象和传进来的参数对象合并在一起 var opts = $.extend(defaults,options);
	//重新为原select标签对象命名 var $this = this;
	//隐藏原select标签，并且在其后添加需要的html元素 $this.hide();
	$this.after('\ <div class="select_container_nw" val="" text="">\ <div class="select_main">\ <span class="select_content">'+ opts.mainContent + '</span>\ <span class="select_arrow"></span>\ <span class="select_arrow_after"></span>\ </div>\ <div class="select_list">\ <div class="select_list_search">\ <input type="text" class="select_input" placeholder='+ opts.searchContent + ' />\ <svg class="search_svg" width="22" height="22" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"\ xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="scale(0.1953125,0.1953125)">\ <path d="M715.703788 754.23602c-22.547452 18.063401-45.349718 32.368198-69.705427 44.00933-17.520761 8.374738-35.504075\ 15.855106-54.439105 20.553105-14.930664 3.704368-29.856211 7.644097-44.994615 10.252505-28.379519 4.889357-57.061949\ 6.077416-85.766892 3.565199-34.438769-3.01466-68.045555-10.180873-100.341431-22.661116-24.903202-9.623171-48.467862-21.898753-70.814738-36.633339-22.860597-15.0733-43.481082-32.716122-62.373131-52.397371-19.4334-20.24509-36.064871-42.643216-50.208579-66.922179-13.388477-22.982434-24.565496-46.985104-32.096323-72.447009-5.006224-16.924461-9.134415-34.232662-11.956811-51.644217-2.846957-17.563004-4.351281-35.43607-5.054321-53.228295-0.721461-18.261922 0.397059-36.585243\ 3.715781-54.656831 2.440688-13.292748 4.178335-26.790156 7.740613-39.782052 4.483293-16.350386 9.949-32.492018 16.006204-48.334845 7.781547-20.35356\ 18.099976-39.582507 30.177543-57.69298 8.523475-12.781094 17.851303-25.107841 27.714342-36.889165 9.398439-11.226692 19.313669-22.194488 30.169356-31.981389\ 13.004721-11.722996 26.782071-22.731724 41.091562-32.821523 12.783678-9.014304 26.272443-17.326621 40.309723-24.191982 16.894471-8.262174 34.473563-15.286148\ 52.17955-21.670555 12.674179-4.570085 25.932691-7.730055 39.133895-10.576893 18.018108-3.885494 36.268517-6.754844 54.77988-6.683213 18.704776 0.072655\ 37.52212-0.553609 56.07851 1.27504 17.961824 1.77032 35.82643 5.561669 53.412686 9.801227 14.351448 3.459798 28.411242 8.397251 42.27353 13.55983\ 22.595549 8.41567 43.682682 19.865443 63.993092 32.908504 21.933442 14.084787 41.764926 30.621415 60.143253 48.988738 15.835305 15.826454 30.265551\ 32.884968 42.67366 51.508117 15.685896 23.541159 28.947477 48.380894 38.83917 74.992995 7.545153 20.298302 13.99737 40.930201 17.25162 62.297858 2.722109\ 17.873066 4.167078 35.976376 5.407377 54.030567 1.565724 22.789029-0.064471 45.551452-3.808906 68.032466-2.449898 14.712073-6.218893 29.229718-9.910113\ 43.704384-5.608977 21.995967-14.46504 42.821271-24.61564 63.035662-12.384571 24.660656-27.783929 47.442522-45.413165 68.658729-6.435843\ 7.745405-13.461135 15.014972-20.439353 22.288632-2.076375 2.164293-1.771417 3.368724 0.132012 5.263887 18.970847 18.886139 37.875175 37.838793\ 56.803041 56.767911 23.195232 23.197328 46.391487 46.394656 69.594906 69.583798 4.574371 4.572132 9.153858 9.139148 13.779396 13.659091 8.403743\ 8.213056 8.515288 19.907399 0.307005 28.498054-6.283364 6.576789-19.059878 7.962346-27.184247-0.197498-16.657054-16.730033-33.445097-33.329083-50.179926-49.980321-14.8928-14.818497-29.810161-29.611411-44.671237-44.460608-10.284659-10.276041-20.570341-20.554128-30.708661-30.974455C728.319637\ 768.056793 722.183635 761.206782 715.703788 754.23602zM171.576765 469.924719c-2.341423 162.585959 126.844127 315.934532 312.196195 319.830259\ 84.326017 1.772366 158.595581-26.428929 220.571652-83.712587 67.885913-62.746066 101.911248-141.241838 102.87729-233.781464\ 1.671129-160.143327-126.333476-315.024813-314.158979-317.868581-87.913879-1.331321-164.273122 29.759791-226.829432 91.557252C204.139735 307.288618\ 173.101555 382.593721 171.576765 469.924719z" fill='+opts.themeColor+'></path></g>\ </svg>\ </div>\ <div class="select_list_body">\ <ul class="select_list_ul">\ <li class="no_result">没 有 结 果</li>\ </ul>\ </div>\ </div>\ </div>');
	//拿到新生成的对select替代的div var $This = $this.next();
	//灌入原select的数据 $this.find("option").each(function (index,element){
	var $li = $('<li val=' + $(element).val() + '>' + $(element).text() + '</li>');
	if ($(element).prop("selected")){
	$li.addClass("list_current");
	$This.find(".select_content").text($(element).text());
}
$This.find(".no_result").before($li);
}
);
	//传进来的参数操作 if (opts.width.trim() != "" && opts.width.trim() != "180px") $This.css("width",opts.width.trim());
	if (opts.listMaxHeight.trim() != "" && opts.listMaxHeight.trim() != "200px") $This.find(".select_list_body").css("max-height",opts.listMaxHeight.trim());
	if (typeof (opts.showSearch) == "boolean" && !opts.showSearch) $This.find(".select_list_search").hide();
	if (opts.fontColor.trim() != "" && opts.fontColor.trim() != "15px"){
	$This.find(".select_content,.select_input,li").css("color",opts.fontColor.trim());
	$This.find("li").hover(function (){
	$(this).css({
	"color":opts.fontHoverColor.trim()}
);
}
,function (){
	$(this).css({
	"color":opts.fontColor.trim()}
);
}
);
}
if (opts.fontFamily.trim() != "" && opts.fontFamily.trim() != "'Helvetica Neue',arial,sans-serif") $This.find(".select_content,.select_input,li").css("font-family",opts.fontFamily.trim());
	if (opts.rowHoverColor.trim() != "" && opts.rowHoverColor.trim() != "#0faf03"){
	$This.find("li").hover(function (){
	$(this).css({
	"background-color":opts.rowHoverColor.trim()}
);
}
,function (){
	$(this).css({
	"background-color":opts.rowColor.trim()}
);
}
);
}
//获取此时列表的高度 var list_height = $This.find(".select_list").height();
	//列表过滤函数 function Search(self){
	var isAllHide = true;
	$This.find(".select_list_ul li").not(".no_result").each(function (index,element){
	if ($(element).text().indexOf($(self).val()) == -1) $(element).hide();
	else if ($(element).hasClass("list_current")) $(element).hide();
	else{
	isAllHide = false;
	$(element).show();
}
}
);
	if (isAllHide) $This.find(".select_list_ul .no_result").show();
	else $This.find(".select_list_ul .no_result").hide();
	$This.find(".select_list").css("height","auto");
	list_height = $This.find(".select_list").height();
}
//动态调整搜索框的宽度 $This.find(".select_input").css({
	"width":$This.find(".select_main").width() - 41}
);
	//为显示框添加点击出现下拉框事件 $This.find(".select_arrow,.select_content,.select_arrow_after").click(function (){
	$This.find(".select_arrow,.select_arrow_after").toggleClass("cast_rotate");
	if ($This.find(".select_arrow_after").hasClass("cast_rotate")) $This.find(".select_arrow_after").css("margin-top","1px");
	else $This.find(".select_arrow_after").css("margin-top","-1px");
	if ($This.find(".select_list").hasClass("list_open")){
	$This.find(".select_list").removeClass("list_open").animate({
	"height":"0px"}
,200,function (){
	$This.find(".select_list").hide();
}
);
}
else $This.find(".select_list").addClass("list_open").css({
	"height":"0px"}
).show().animate({
	"height":list_height + "px"}
,200);
}
);
	//动态调整显示框的宽度 $This.find(".select_content").css({
	"width":$This.width() - $This.find(".select_arrow").width() - 40 + "px"}
);
	//为每一行元素添加点击事件 $This.find(".select_list_body").delegate("li","click",function (){
	if ($(this).hasClass("no_result")) return;
	$This.find(".select_list_body li").removeClass("list_current").show();
	$(this).addClass("list_current").hide();
	Search($This.find(".select_input"));
	$This.find(".select_content").text($(this).text());
	$This.attr({
	"val":$(this).attr("val") == null ? '':$(this).attr("val"),"text":$(this).text()}
);
	$this.val($(this).attr("val"));
	list_height = $This.find(".select_list").height();
	$This.find(".select_content").trigger("click");
}
);
	//为搜索框添加keyup事件 $This.find(".select_input").on("keyup",function (){
	Search(this);
}
);
	//引用滚动插件 $This.find(".select_list_body").mCustomScrollbar({
	theme:"minimal",advanced:{
	autoExpandHorizontalScroll:true}
}
);
	$This.find(".select_list_body .mCSB_dragger_bar").css({
	"background-color":"#00bb9c"}
);
	//传进来的参数操作，需要写在滚动插件调用之后 if (opts.themeColor.trim() != "" && opts.themeColor.trim() != "#00bb9c"){
	$This.find(".select_main,.select_input,.select_list").css("border-color",opts.themeColor.trim());
	$This.find(".select_list_body .mCSB_dragger_bar").css({
	"background-color":opts.themeColor.trim()}
);
	$This.find(".select_arrow").css("border-top-color",opts.themeColor.trim());
}
//返回原jquery对象,保持链式调用 return $this;
	//////////////////////////////////////////////////////////代码内部}
}
);
}
)(jQuery,window,document)

CSS代码(select.css):

.vertical{width:200px;/*元素的宽度*/
height:200px;/*元素的高度*/
position:absolute;left:50%;/*配合margin-left的负值实现水平居中*/
margin-left:-100px;/*值的大小等于元素宽度的一半*/
top:40%;/*配合margin-top的负值实现垂直居中*/
margin-top:-100px;/*值的大小等于元素高度的一半*/
}
.select_container_nw{position:relative;width:180px;font-size:15px;font-family:'Helvetica Neue',arial,sans-serif;font-weight:300;letter-spacing:1px;display:inline-block;}
.select_main{position:relative;width:inherit;border:1px solid #00bb9c;height:28px;cursor:pointer;}
.select_content{display:block;padding:6px 0px 7px 10px;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;}
.select_content::after{content:'';position:absolute;right:0;top:0;bottom:0;width:40px;border-radius:0 2px 2px 0;box-shadow:inset -55px 0 25px -20px #fff;}
.select_input{padding-left:10px;padding-right:32px;font-size:15px;overflow:hidden;outline:none;height:25px;border:none;border-bottom:1px solid #00bb9c;background:url('/images/Search.png') no-repeat fixed top;z-index:1;}
.search_svg{position:absolute;top:2px;right:3px;z-index:2;}
/*.select_arrow,.select_arrow::after{content:'';position:absolute;right:6px;top:38%;border:8px solid transparent;border-top:8px solid #05826d;z-index:2;-webkit-transform-origin:50% 20%;-moz-transform-origin:50% 20%;-ms-transform-origin:50% 20%;transform-origin:50% 20%;transition:all 150ms ease-in-out;cursor:pointer;}
*/
.select_arrow,.select_arrow_after{content:'';position:absolute;right:6px;top:38%;border:8px solid transparent;border-top:8px solid #05826d;z-index:2;-webkit-transform-origin:50% 20%;-moz-transform-origin:50% 20%;-ms-transform-origin:50% 20%;transform-origin:50% 20%;transition:all 150ms ease-in-out;cursor:pointer;}
/*.select_arrow::after{cursor:pointer;margin-top:-9px;right:-8px;border-top-color:#fff;}
*/
.select_arrow_after{cursor:pointer;margin-top:-1px;right:6px;border-top-color:#fff;}
.select_list{position:absolute;left:0px;top:100%;width:inherit;border:1px solid #00bb9c;border-top:none;background-color:#fff;overflow:hidden;display:none;}
.select_list > .select_list_body ul{margin:0px;padding:0px;list-style:none;}
.select_list > .select_list_body ul li{padding-top:4px;padding-bottom:4px;cursor:pointer;user-select:none;-webkit-user-select:none;overflow:hidden;text-indent:10px;}
.select_list > .select_list_body ul li:hover{background-color:#00bb9c;color:#fff;}
.cast_rotate{transform-origin:50% 20%;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
.select_list_body{max-height:200px;overflow:hidden;}
.list_current{display:none;}
.no_result{display:none;text-align:center;color:#00bb9c;}

附件:下载该文件资源,减少时间成本(增值服务)