div仿checkbox表单样式美化及功能有素材
导读：收集整理的这篇文章主要介绍了div仿checkbox表单样式美化及功能有素材，觉得挺不错的，现在分享给大家，也给大家做个参考。 div仿checkbox表单样式美化及功能（checkbox的样式不好看）素材在底部： 效果图： w...
收集整理的这篇文章主要介绍了div仿checkbox表单样式美化及功能有素材，觉得挺不错的，现在分享给大家，也给大家做个参考。 div仿checkbox表单样式美化及功能（checkbox的样式不好看）素材在底部： 效果图：
window.css
@H_360_7@复制代码代码如下:
.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
复制代码代码如下:
span style="font-size:12px; "> 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> /span>
js函数：
复制代码代码如下:@H_777_244@
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>
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>
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>
这是一个弹出层的表单选择。
图片素材：
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： div仿checkbox表单样式美化及功能有素材
本文地址： https://pptw.com/jishu/584962.html