Html
    Css
    Js
@charset "utf-8";
	* {
	font-size:14px;
	border:0;
	margin:0;
	padding:0;
}
body {
	font-family:'微软雅黑';
	margin:0 auto;
	min-width:980px;
}
ul {
	display:block;
	margin:0;
	padding:0;
	list-style:none;
}
li {
	display:block;
	margin:0;
	padding:0;
	list-style:none;
}
img {
	border:0;
}
dl,dt,dd,span {
	margin:0;
	padding:0;
	display:block;
}
a,a:focus {
	text-decoration:none;
	color:#000;
	outline:none;
	blr:expression(this.onFocus=this.blur());
}
a:hover {
	color:#66667F;
	text-decoration:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
cite {
	font-style:normal;
}
h2,h3 {
	font-weight:normal;
}
input {
	margin:0;
	padding:0;
	outline:none;
}
.clearfix {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
/* 下拉多选 */
.dropdown {
	width:380px;
	margin-top:20px;
	margin-left:5px;
	position:relative;
}
.dropdown-toggle {
	display:inline-block;
	width:380px;
	height:36px;
	color:#333;
	padding-left:10px;
	padding-right:40px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	text-align:left;
	border-radius:2px;
	background:#fff url(../images/down.png) right no-repeat;
	background-position:358px 13px;
	border:1px #ccc solid;
}
.dropdown-menu {
	background:#fff;
	border:1px #ccc solid;
	margin-top:0;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	position:absolute;
	left:0;
}
.dropdown-menu ul {
	width:358px;
	padding:10px;
}
.dropdown-menu .scroll {
	height:300px;
	overflow-y:auto;
	position:relative;
}
.dropdown-menu ul li {
	width:auto;
	text-align:left;
	height:32px;
	margin-top:10px;
	border-bottom:1px #ccc dashed;
}
.dropdown-menu ul li a {
	text-decoration:none;
	color:#666;
}
.dropdown-menu ul li input {
	width:14px;
	height:14px;
	display:inline-block;
	border:none;
	margin-right:5px;
	padding-left:0;
}
.okcheck {
	width:100%;
	display:block;
	height:32px;
	line-height:32px;
	background:#f3f3f3;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	position:absolute;
	bottom:0;
	left:0;
	z-index:888;
}
.okcheck a {
	text-decoration:none;
	font-size:14px;
	margin-right:10px;
}
.okcheck .count {
	color:#666;
}
.okcheck .count i {
	color:red;
	font-size:14px;
}
.a1 {
	float:left;
	margin-left:20px;
}
.a1 span {
	display:inline-block;
}
.a2 {
	float:left;
}

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

div模拟select(支持多选)

现在传统的select下拉选择样式已不能满足用户需求,大家都喜欢漂亮的界面,而程序员喜欢简单的、具有可控性的编程方式,使用此代码时只用引入相应的jQuery库、js代码以及css样式(可以自定义)就能实现想要的效果,本例子默认必须选一项(可修改)。

1
      wang198901220
      2017/7/7 10:51:07