The beautification and functionality of the div faux checkbox form style

CheckBox style is not good-looking, p imitation checkbox form style and function, material at the bottom, need friends can refer to the next

P mimic checkbox form style and function (checkbox style is not good to see) footage at the bottom:
：

Window.css

. BJ {position:absolute; top:0; left:0; bottom:1px; width:100%; height:980px; z-index:9; Background-color: #0 00; 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-bot TOM: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; co Lor: #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; f ont-family: "Microsoft Ya Black", "Song Body"; 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; Backgrou Nd:url ('.. /images/input06.gif ') no-repeat; Margin:0 5px; font-family: "Microsoft Ya Black", "Song Body"; 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: #f2f 2F2; font-family: "Microsoft Ya Black", "Song Body"; 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

<span style= "FONT-SIZE:12PX;" ><style type= "Text/css" >. window{left:25%; width:676px;}. window top{width:626px;} window span{font-family : "Microsoft Jas Black"; 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 p{width:125px; float:left; Vertical-alig N: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:

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 (). 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:

<p id= "joinsetting" style= "display:none; Visibility:hidden; "> <p id=" back2 "class=" BJ "></p> <p id=" wissetting "class=" window "> <p class=" Top "> <a Href= "Javascript:closealbum ();" class= "Close" > </a> request form required settings </p> <dl class=" add post "> <dd> <span> Basic information </span><br/> 
This is a popup layer of form selection.
Image material:


The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!