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;	}

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');		}	});	});

							申请表必填项设置			

					基本信息


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


0
籍贯
					
0
性别
					
0
生日
					
0
民族
					
0
政治面貌
					

0
身份证
					
0
学历
					
0
电话
					
0
传真
					
0
邮箱
				
				
					企业信息


0
地址
					
0
员工数
					
0
法人代表
					
0
成立时间
					
0
企业性质
					

0
是否上市
					
0
所属行业
					
0
网址
					
0
企业资产
				
				
					附件


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

图片素材：