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
<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>
这是一个弹出层的表单选择。
图片素材:
div仿checkbox表单样式美化及功能的更多相关文章
- html5 表单样式 表单验证1 2 3
html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- HTML表单样式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <he ...
- 网页禁用表单的自动完成功能禁用密码自动填充autocomplete
网页中表单的自动完成功能,有时候很方便,但是有时候并不想让浏览器记忆表单,比如禁用密码域自动填充功能, 网页禁用表单的自动完成功能是由input元素的autocomplete属性控制,关闭表单的自动完 ...
- 自定义表单样式之checkbox和radio
1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都 ...
- CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置
一.CSS简介: w3c(World Wide Web Consortium):万维网联盟,是规定网页标准的一个组织(叫做Web标准) Web标准:是由w3c和其他标准化组织制定的一系列标准的集合, ...
- Bootstrap_表单_表单样式
一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> <inp ...
- yii中调整ActiveForm表单样式
Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, <?php $form = ActiveForm::begin([ 'id' => 'login-for ...
- [01] radio ,checkbox 表单文字对齐
http://www.cnblogs.com/wangsir015/p/5555818.html 这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是ch ...
随机推荐
- [Android系列—] 1. Android 开发环境搭建与Hello World
前言 開始之前先熟悉几个名词: SDK -- Software Development Kit, 软件开发工具包.这个词并不陌生, JDK,就是Jave Development Kit,相同对于And ...
- android ADT 设置编辑字体
新配置的android ADT 设置编辑字体的时候 可能里面没有我们想要的Courier new 这种舒服的字体 那么就在 字体选项窗口的 做下端 有个显示更多字体的链接 然后就显示微软的所有字 ...
- 使用BAT方法结束进程
@echo off taskkill /f /im GAM.exe taskkill /f /im GCL10.exe http://www.cnblogs.com/FKdelphi/p/501540 ...
- eclipse 默认jdk 的设置 eclipse.ini -vm 参数
eclipse 的配置文件 eclipse.ini 不仅仅可以设置eclipse的堆栈内存大小,也可设置默认使用的jdk版本. 一.现有个eclipse 默认启动jdk版本是jdk1.5,需更改为1. ...
- Amazon RDS的通用型存储(SSD)
在今年的6月份,我们曾介绍过为Amazon EC2实例提供的基于SSD的弹性块级存储. 在公布几个月过后,这样的被称为通用型存储(SSD)的新型选择方式在创建新的EBS卷中已经占到了90%,我们从客户 ...
- IE Jquery中拒绝訪问的处理方法
多人合作开发一个站点过程中,为便于开发,将一些公共文件如js,css,images放在外网上,各自链接这类文件以供使用.本地測试时网页的一些JS代码在IE8,IE6中会停止运行,并报某个js文件拒绝訪 ...
- Axure基础系列教程
Axure rp 6.5的软件安装.汉化与注册 认识Axure的软件界面 生成网页原型的三种方法 如何关闭IE浏览器在生成原型时候的安全警告 在chrome中使用axure生成原型的问题 站点地图 ...
- 设置MyEclipse中代码的换行长度
1.打开Preferences -> Java -> Code Style -> Formatter. 2.选择Edit -> Line Wrapping -> Max ...
- FZOJ2110: Star
Problem Description Overpower often go to the playground with classmates. They play and chat on the ...
- TEXT文本编辑框4 点击按钮读取文本框内容到内表
*&---------------------------------------------------------------------* *& Report ZTEST_CWB ...