div仿checkbox表单样式美化及功能有素材
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
<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函数：
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>
这是一个弹出层的表单选择。
图片素材：
效果图：
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
复制代码
代码如下:<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函数：
复制代码
代码如下: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>
这是一个弹出层的表单选择。
图片素材：
本文地址：https://www.stayed.cn/item/20176
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)