Html
    Css
    Js


.select_box {
	float:left;
	min-width:170px;
	height:30px;
	margin-right:5px;
	position:relative;
}
.select_box .title {
	width:100%;
	height:30px;
	line-height:29px;
	padding:0px 15px;
	cursor:pointer;
	border-bottom:1px solid #4d66c3;
}
.select_box .title span {
	color:#b1b2b3;
	font-weight:bold;
}
.select_box .title i {
	font-style:normal;
	color:#4d66c3;
}
.select_box .title em {
	position:absolute;
	right:15px;
	margin-left:5px;
	margin-top:-2px;
}
.select_box .title .select_down {
	font-size:16px;
	display:inline-block;
}
.select_box .title .select_up {
	font-size:24px;
	display:none;
}
.select_box ul {
	width:100%;
	max-height:200px;
	border:1px solid #4d66c3;
	padding:10px 0px;
	box-shadow:2px 2px 4px #ccd4e8,-2px -2px 4px #ccd4e8;
	background-color:#fff;
	overflow-y:auto;
	position:absolute;
	top:30px;
	z-index:99;
	display:none;
}
.select_box ul li {
	height:42px;
	line-height:42px;
	padding:0px 20px;
	font-size:16px;
	color:#333;
	cursor:pointer;
}
.select_box ul li.this {
	color:#4d66c3;
	background-color:#dbe0f3;
}

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

jQuery模拟下拉框(原创)

更新时间:2020-09-14 21:21:48

0