Html
    Css
    Js

    
                        
.con {
	width:1000px;
	margin:0 auto;
}
.con h1 {
	text-align:center;
	font-weight:normal;
}
h1,h2 {
	font-weight:normal;
	color:#0CC;
	clear:both;
}
ul {
	margin:0;
	padding:0;
	list-style:none;
}
.select_box {
	width:200px;
	height:36px;
	border:1px solid #3CF;
	position:relative;
	float:left;
	margin-right:50px;
}
.select_box span {
	display:inline-block;
	width:200px;
	height:36px;
	line-height:36px;
	cursor:pointer;
	text-indent:10px;
}
.select_box .span_aa {
	color:#C36;
}
.select_box ul {
	width:200px;
	position:absolute;
	top:36px;
	left:-1px;
	border:1px solid #3CF;
	display:none;
	background:#fff;
}
.select_box li {
	cursor:pointer;
	line-height:36px;
	text-indent:10px;
}
.select_box li:hover {
	background:#39F;
	color:#fff;
}
.select_box font {
	position:absolute;
	right:10px;
	font-size:26px;
	font-family:"微软雅黑";
	color:#3CF;
	transform:rotate(90deg);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

js自定义下拉框美化特效

1
      罄?一瞥0
      2017/7/3 15:27:04

      小bug:点击下拉按钮没反应修改其z-index:-1;  over!

      回复