div仿checkbox表单样式美化及功能_html/css_WEB-ITnose

div仿checkbox表单样式美化及功能（checkbox的样式不好看）素材在底部：

效果图：

window.css

.bj {	position: absolute;	top: 0;	left: 0;	bottom: 1px;	width: 100 % ;	height: 980px;	z - index: 9;	background - color: #000;	filter: alpha(opacity = 50); - moz - opacity: 0.5; - khtml - opacity: 0.5;	opacity: 0.5;}.window {	position: absolute;	top: 106px;	left: 33 % ;	width: 466px;	background - color: #fff;	color: #000;	border - bottom: 1px solid#dbdcdd;	padding - bottom: 8px;	overflow: hidden;	z - index: 10;}.window.top {	width: 416px;	padding: 0px 25px 0 25px;	height: 48px;	line - height: 48px;	font - size: 18px;	background - color: #ececec;	border - bottom: 1px solid#d8d8d8;	overflow: hidden;}.window.top.close {	float: right;	margin - top: 14px;}.window.top span {	padding: 0 6px;}.window.add {	width: 394px;	margin: 0 auto;	padding - top: 10px;	font - size: 15px;	color: #686868;	overflow: hidden;}.window.add dd,.window.add dt {	width: 100 % ;	padding - bottom: 8px;	line - height: 38px;	overflow: hidden;}.window.add span {	float: left;	width: 69px;	overflow: hidden;}.window.add dd input {	width: 314px;	height: 36px;	line - height: 36px;	border: 1px solid#c9c5c1;	background - color: #f2f2f2;	font - family: "微软雅黑",	"宋体";	font - size: 15px;	color: #686868;}.window.add dt input {	vertical - align: middle;	margin - right: 10px;}.window.add dt label {	margin - right: 10px;	margin - left: 20px;}.window.add dt label.perlabel {	margin - left: 0px;}.window.add dd input.two {	width: 192px;	height: 33px;	line - height: 33px;	border: none;	background: url('../images/input09.gif') no - repeat;	margin - right: 13px;}.window.add dd a {	margin - left: 10px;	font - size: 16px;}.window.add dt.button {	text - align: center;	padding - top: 8px;}.window.add dt.button input {	width: 103px;	height: 41px;	line - height: 39px;	text - align: center;	border: none;	background: url('../images/input06.gif') no - repeat;	margin: 0 5px;	font - family: "微软雅黑",	"宋体";	font - size: 15px;	color: #686868;}.window.post {	width: 420px;}.window.post span {	width: 86px;}.window.post dt {	line - height: 26px;}.window.post dt span {	height: 108px;	line - height: 108px;}.window.post dt label {	width: 100px;	float: left;}.window.post dt label.perlabel {	float: none;}.window.post textarea {	width: 312px;	height: 62px;	line - height: 24px;	border: 1px solid#c9c5c1;	background - color: #f2f2f2;	font - family: "微软雅黑",	"宋体";	font - size: 14px;	color: #686868;}.window.post dd input.three {	width: 238px;	margin - right: 10px;}.window.default {		width:		406px;	}	.window.default span {		width:		52px;	}.window.default dd select {		width:		38px;		margin:		0 6px;	}.window.default dd textarea {		width:		350px;	}.window.default dd b {		float:		right;		margin - right: 5px;		font - weight: normal;	}.window.default dd b input {		width:		auto;		height:		auto;		margin - right: 5px;	}

页面中的css

js函数：

function openJoinSetting(){	var joinSetting = document.getElementById('joinSetting');	joinSetting.style.display='block';	joinSetting.style.visibility='visible';	document.getElementById('back2').style.display='block';	document.getElementById('wiSsetting').style.display='block';	}$(document).ready(function(){	$(".custom_checkbox_self").click(function(){		if($(this).text().trim()=="0"){						$(this).css("background","url(../images/custom_checkbox_checked.png)");			$(this).text('1');		}else{			$(this).css("background","url(../images/custom_checkbox.png)");			$(this).text('0');		}	});	});

窗口代码：

		
		
			申请表必填项设置
			

					基本信息

姓名
					
手机
					
企业
					
企业职位
					
申请职务
				
				
					详细信息

籍贯
					
性别
					
生日
					
民族
					
政治面貌
					
身份证
					
学历
					
电话
					
传真
					
邮箱
				
				
					企业信息

地址
					
员工数
					
法人代表
					
成立时间
					
企业性质
					
是否上市
					
所属行业
					
网址
					
企业资产
				
				
					附件

营业执照复印件
					
身份证照片
					
个人名片照片
				
				
					
			

这是一个弹出层的表单选择。

图片素材：