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

<style type="text/css">.window{	left:25%;	width:676px;}.window .top{	width:626px;}.window span{	font-family:"微软雅黑";	font-weight: bold;}.window .post{	width:645px;}.window .post label{	font-size: 13px;}.window dl{margin-left:25px !important;}.window .post hr{	width:230px;	text-align: left;	margin-bottom: 20px;}	.window .add dd div{	width:125px;	float:left;	vertical-align: middle;	height: 18px;	line-height: 18px;}.custom_checkbox_self{	width:18px;	height:18px;	text-indent:100px;	overflow:hidden;	float:left;	background:url(../images/custom_checkbox.png);	margin-right:10px;	}</style>

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

窗口代码：

<div id="joinSetting" style="display: none; visibility: hidden; ">	<div id="back2" class="bj"></div>	<div id="wiSsetting" class="window">		<div class="top">			<a href="javascript:closealbum();" class="close"><img src="../images/icon03.gif" alt="关闭"> </a>申请表必填项设置</div>			<dl class="add post">					<dd>					<span>基本信息</span><br>					<hr>					<div>
<div id="MemberName" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="MemberName">姓名</label>
</div>					<div>
<div id="Phone" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="Phone">手机</label>
</div>					<div>
<div id="Company" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="Company">企业</label>
</div>					<div>
<div id="Post" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="Post">企业职位</label>
</div>					<div>
<div id="applyPosiGuid" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="applyPosiGuid">申请职务</label>
</div>				</dd>				<dd>					<span>详细信息</span><br>					<hr>					<div>
<div id="Hometown" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="Hometown">籍贯</label>
</div>					<div>
<div id="Gender" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="Gender">性别</label>
</div>					<div>
<div id="Birthday" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="Birthday">生日</label>
</div>					<div>
<div id="Nation" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="Nation">民族</label>
</div>					<div>
<div id="Party" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="Party">政治面貌</label>
</div>					<br>					<div>
<div id="IdentityCard" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="IdentityCard">身份证</label>
</div>					<div>
<div id="EducationLevel" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="EducationLevel">学历</label>
</div>					<div>
<div id="Telephone" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="Telephone">电话</label>
</div>					<div>
<div id="Fax" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="Fax">传真</label>
</div>					<div>
<div id="Email" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="Email">邮箱</label>
</div>				</dd>				<dd>					<span>企业信息</span><br>					<hr>					<div>
<div id="CompanyAddress" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="CompanyAddress">地址</label>
</div>					<div>
<div id="CompanyStaffNumber" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="CompanyStaffNumber">员工数</label>
</div>					<div>
<div id="CompanyLegalPerson" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="CompanyLegalPerson">法人代表</label>
</div>					<div>
<div id="CompanyCreatedDate" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="CompanyCreatedDate">成立时间</label>
</div>					<div>
<div id="CompanyProperty" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="CompanyProperty">企业性质</label>
</div>					<br>					<div>
<div id="CompanyIsPublic" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="CompanyIsPublic">是否上市</label>
</div>					<div>
<div id="CompanyIndustry" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="CompanyIndustry">所属行业</label>
</div>					<div>
<div id="CompanyWebsite" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="CompanyWebsite">网址</label>
</div>					<div>
<div id="CompanyAssets" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="CompanyAssets">企业资产</label>
</div>				</dd>				<dd>					<span>附件</span><br>					<hr>					<div>
<div id="CompanyPicUrl" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="CompanyPicUrl">营业执照复印件</label>
</div>					<div>
<div id="IdentityPicUrl" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="IdentityPicUrl">身份证照片</label>
</div>					<div style="width:150px;">
<div id="PersionPicUrl" style="width:18px;" class="custom_checkbox_self">0</div>
<label for="PersionPicUrl">个人名片照片</label>
</div>				</dd>				<dt class="button">					<input name="" type="submit" value="确认" onclick="">					<input name="" type="button" value="取消" onclick="">				</dt>			</dl>	</div>
</div>

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

图片素材：