div模倣チェックボックスフォームスタイルの美化とfunction_html/css_WEB-ITnose

div 模倣チェックボックスフォームスタイルの美化と機能 (チェックボックススタイルは見栄えが良くありません) マテリアルは一番下にあります:

レンダリング:

window.css

りーページ内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;	}

js関数:

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

ウィンドウコード:

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

これはポップアップレイヤーのフォーム選択です。

写真素材：