Beautification and function of div imitating checkbox form style

The checkbox style is not good-looking, p imitates the checkbox form style beautification and function, the material is at the bottom, friends in need can refer to the

p imitation checkbox form style beautification and function (the checkbox style is not good-looking) material At the bottom:
Rendering:

##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 in the page

js function:

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

Window code:

 
 
 
 
 申请表必填项设置
 
 
 
基本信息
 
 
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
个人名片照片
 
 
 
 
 
 
 
 

This is a pop-up layer form selection.

Picture material:

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem that Firefox uses offsetHeight to get the height of a div when it is 0

##

The above is the detailed content of Beautification and function of div imitating checkbox form style. For more information, please follow other related articles on the PHP Chinese website!