《
CSS3网页实例 美化网页下拉列表》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023324H013.htm
</script>
$(function(){
//插件调用
$('.iselect').iSimulateSelect();
})
Tag：网页 美化 实例
<!--DEMO end-->
<!--@Mr.Think的统计及广告代码,应用样例请勿复制:)-->
<div class="clear"></div>
<div id="adsense"></div>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
try {
var pageTracker = _gat._getTracker("UA-15924173-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
<!--@end-->
</body>
</html>
--> [
网站建设之]CSS3网页实例:丑化网页下拉列表
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>同一下拉列表样式并实现select款式高度自定义的jQuery插件@Mr.Think</title>
<link rel="stylesheet" href=" />
<link rel="shortcut icon" type="image/x-icon" href=" />
<meta name="author" content="Mr.Think又名青鸟简称i" />
<meta name="keywords" content="i,Mr.Think,前端开发,WEB前端,前端技巧,前端开发,WEB前端开发,用户休会,网站谋划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP喜好者" />
<meta name="description" content="Mr.Think的博客,中文网名青鸟,现专注于WEB前端开发,同时也是一位PHP的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,爱好肉食.这里是我记载常识与生活琐事的处所." />
<link rel="pingback" href=" />
<link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href=" />
<script src="
<style>
p{float:left;margin:20px;font-size:14px}
/*style for iSimulateSelect*/
.i_selectbox{margin-top:20px;height:32px;position:relative;font-size:14px}
.i_selectbox .i_currentselected{width:220px;height:32px;background:#fff url( right top no-repeat;border:1px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;text-indent:10px;line-height:32px;cursor:pointer}
.i_selectbox .i_selectoption{overflow-x:hidden;overflow-y:auto;position:absolute;left:-5px;top:-2px;padding:5px;background-color:#fff;background:rgba(255,255,255,.9);-webkit-box-shadow:-2px 3px 5px rgba(0,0,0,.3);-moz-box-shadow:-2px 3px 5px rgba(0,0,0,.3);box-shadow:-2px 3px 5px rgba(0,0,0,.3);border-radius:5px;border-right:1px solid #eee}
.i_selectbox .i_selectoption dt{height:24px;background-color:#eee;text-indent:5px;font-style:italic;color:#555;line-height:24px;}
.i_selectbox .i_selectoption dd{height:30px;border-bottom:1px dashed #ccc;cursor:pointer;text-indent:10px;line-height:30px}
.i_selectbox .i_selectoption dd:hover{background-color:#888;color:#fff}
.i_selectbox .i_selectoption dd.selected{background-color:#555;color:#fff}
</style>
</head>
<body>
<div id="d_head">
<h1><a title="返回Mr.Think的博客" href="
<h2><span><a title="订阅Mr.Think的博客" href=" Feed</a></span>@专一Web前端技术, 酷爱PHP, 崇尚简略生涯的凡夫俗子.</h2>
</div>
<div class="return">返回文章页:<a href="
<!--DEMO start-->
<div id="demo">
<p>
<select class="iselect">
<optgroup label="战国大家">
,CSS3网页制作教程 Action hovert; <option value="0">请抉择你爱好的人</option>
<option value="1">墨子</option>
<option value="2">老子</option>
,CSS3网页制作实例 CSS3网页页面效果; <option value="3">庄子</option>
,CSS3网页制作实例 content属性的综合用法; <option value="4">荀子</option>
</optgroup>
<optgroup label="秦国将军">
<option value="5">蒙恬</option>
<option value="6">王贲</option>
<option value="7">王翦</option>
<option value="8">白起</option>
<option value="9">司马错</option>
</optgroup>
<optgroup label="秦国名臣">
<option value="10">蒙毅</option>
<option value="11">李斯</option>
<option value="12">张仪</option>
<option value="13">卫鞅</option>
</optgroup>
</select>
</p>
<p>
<select class="iselect">
<option value="1">秦孝公(前361—前338年)</option>
<option value="2">秦惠文王(前337—前311年)</option>
<option value="4">秦昭襄王(前306—前251年)</option>
<option value="5">秦孝文王(前250年)</option>
<option value="6",CSS3简单实例分析学习;>秦庄襄王(前250—前247年)</option>
<option value="7" selected="selected">秦始天子(前246—前210年)</option>
<option value="8">秦二世(前209—前207年)</option>
<option value="9">秦王子婴(前206年)</option>
</select>
</p>
<select style="float:right">
<option value="0">我是个没穿衣服的select???</option>
<option value="1">我是个没穿衣服的select???</option>
<option value="2">我是个没穿衣服的select???</option>
<option value="3">我是个没穿衣服的select???</option>
<option value="4">我是个没穿衣服的select???</option>
</select>
</div>
<script>
;(function($){
/*
* 统一select样式并实现样式高度自定义的jQuery插件@Mr.Think(
*/
$.fn.iSimulateSelect=function(iSet){
iSet=$.extend({
selectBoxCls:'i_selectbox', //string类型,外围class名
curSCls:'i_currentselected',//string类型,默认显示class名
optionCls:'i_selectoption',//string类型,下拉列表class名
selectedCls:'selected',//string类型,当前选中class名
width:222,//number类型，模拟select的宽度
height:300,//number类型，模拟select的最大高度
zindex:20//层级次序
},iSet||{});
this.hide();
return this.each(function(){
var self=this;
var thisCurVal,thisSelect,cIndex=0;
//盘算模仿select宽度
if(iSet.width==0){
iSet.width=$(self).width();
}
var html='<div class="'+iSet.selectBoxCls+'" style="z-index:'+iSet.zindex+'"><div class="'+iSet.curSCls+'" style="width:'+iSet.width+'px">'+$(self).find('option:selected').text()+'</div><dl class="'+iSet.optionCls+'" style="display:none;width:'+iSet.width+'px">';
//断定select中是否有optgroup
//用dt替代optgroup，用dd替换option
if($(self).find('optgroup').size()>0){
$(this).find('optgroup').each(function(){
html+='<dt>'+$(this).attr('label')+'</dt>';
$(this).find('option').each(function(){
,css3教程：弹性盒模型; if($(this).is(':selected')){
html+='<dd class="'+iSet.selectedCls+'">'+$(this).text()+'</dd>';
}else{
html+='<dd>'+$(this).text()+'</dd>';
}
});
});
}else{
$(this).find('option').each(function(){
if($(this).is(':selected')){
html+='<dd class="'+iSet.selectedCls+'">'+$(this).text()+'</dd>';
}else{
html+='<dd>'+$(this).text()+'</dd>';
}
});
}
//将模拟dl插入到select后面
$(self).after(html);
//当前模拟select外围box元素
thisBox=$(self).next('.'+iSet.selectBoxCls);
//当前模拟select初始值元素
thisCurVal=thisBox.find('.'+iSet.curSCls);
//当前模拟select列表
thisSelect=thisBox.find('.'+iSet.optionCls);
/*
若同页面还有其余原生select,请前往https://github.com/brandonaaron/bgiframe下载bgiframe，同时在此处调用thisSelect.bgiframe()
,CSS3教程 使css3的属性在ie中正常显示; */
//thisSelect.bgiframe();
//弹出模拟下拉列表
thisCurVal.click(function(){
$('.'+iSet.optionCls).hide();
$('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex);
$(self).next('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex+1);
thisSelect.show();
,CSS3教程 Transform-变形处理; });
//若模拟select高度超越限定高度，则主动overflow-y:auto
,CSS3教程 pointer-events属性值详解; if(thisSelect.height()>iSet.height){
thisSelect.height(iSet.height);
}
//模拟列表点击事件-赋值-转变y坐标地位-...
thisSelect.find('dd').click(function(){
$(this).addClass(iSet.selectedCls).siblings().removeClass(iSet.selectedCls);
cIndex=thisSelect.find('dd').index(this);
thisCurVal.text($(this).text());
$(self).find('option').eq(cIndex).attr('selected','selected'),CSS3教程 overflow属性超过一行显示省略号;
$('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex);
thisSelect.hide();
});
//非模拟列表处点击暗藏模拟列表
//$(document)点击事件不兼容局部挪动装备
$('html,body').click(function(e){
if(e.target.className.indexOf(iSet.curSCls)==-1){
thisSelect.hide();
$('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex);
}
});
//取消模块列表处撤消默认事件
thisSelect.click(function(e){
e.stopPropagation();
,CSS3教程 box-sizing属性; });
});
}
})(jQuery);
(责任编辑：网站建设)
CSS3网页实例 美化网页下拉列表相关文章