div仿checkbox表单样式美化及功能有素材
div仿checkbox表单样式美化及功能有素材
发布时间:2017-01-07 来源:查字典编辑
摘要:div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部:效果图:window.css.bj{position:...

div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部:

效果图:

1

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 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">

<div id="back2"></div>

<div id="wiSsetting">

<div>

<a href="javascript:closealbum();"><img

src="../images/icon03.gif" alt="关闭" /> </a>申请表必填项设置</div>

<dl>

<dd>

<span>基本信息</span><br/>

<hr/>

<div><div id="MemberName">0</div><label for="MemberName">姓名</label></div>

<div><div id="Phone">0</div><label for="Phone">手机</label></div>

<div><div id="Company">0</div><label for="Company">企业</label></div>

<div><div id="Post">0</div><label for="Post">企业职位</label></div>

<div><div id="applyPosiGuid">0</div><label for="applyPosiGuid">申请职务</label></div>

</dd>

<dd>

<span>详细信息</span><br/>

<hr/>

<div><div id="Hometown">0</div><label for="Hometown">籍贯</label></div>

<div><div id="Gender">0</div><label for="Gender">性别</label></div>

<div><div id="Birthday">0</div><label for="Birthday">生日</label></div>

<div><div id="Nation">0</div><label for="Nation">民族</label></div>

<div><div id="Party">0</div><label for="Party">政治面貌</label></div>

<div><div id="IdentityCard">0</div><label for="IdentityCard">身份证</label></div>

<div><div id="EducationLevel">0</div><label for="EducationLevel">学历</label></div>

<div><div id="Telephone">0</div><label for="Telephone">电话</label></div>

<div><div id="Fax">0</div><label for="Fax">传真</label></div>

<div><div id="Email">0</div><label for="Email">邮箱</label></div>

</dd>

<dd>

<span>企业信息</span><br/>

<hr/>

<div><div id="CompanyAddress">0</div><label for="CompanyAddress">地址</label></div>

<div><div id="CompanyStaffNumber">0</div><label for="CompanyStaffNumber">员工数</label></div>

<div><div id="CompanyLegalPerson">0</div><label for="CompanyLegalPerson">法人代表</label></div>

<div><div id="CompanyCreatedDate">0</div><label for="CompanyCreatedDate">成立时间</label></div>

<div><div id="CompanyProperty">0</div><label for="CompanyProperty">企业性质</label></div>

<div><div id="CompanyIsPublic">0</div><label for="CompanyIsPublic">是否上市</label></div>

<div><div id="CompanyIndustry">0</div><label for="CompanyIndustry">所属行业</label></div>

<div><div id="CompanyWebsite">0</div><label for="CompanyWebsite">网址</label></div>

<div><div id="CompanyAssets">0</div><label for="CompanyAssets">企业资产</label></div>

</dd>

<dd>

<span>附件</span><br/>

<hr/>

<div><div id="CompanyPicUrl">0</div><label for="CompanyPicUrl">营业执照复印件</label></div>

<div><div id="IdentityPicUrl">0</div><label for="IdentityPicUrl">身份证照片</label></div>

<div><div id="PersionPicUrl">0</div><label for="PersionPicUrl">个人名片照片</label></div>

</dd>

<dt>

<input name="" type="submit" value="确认"/>

<input name="" type="button" value="取消" />

</dt>

</dl>

</div>

</div>

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

图片素材:

div仿checkbox表单样式美化及功能有素材1

div仿checkbox表单样式美化及功能有素材2

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类