Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use div to imitate checkbox form style beautification and function", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to use div to imitate checkbox form style beautification and function"!

Div imitates checkbox form style beautification and function (checkbox style is not good-looking) material at the bottom:

The code is as follows:

.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: Microsoft Yahi

Song style

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: Microsoft Yahi

Song style

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: Microsoft Yahi

Song style

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

The code is as follows:

.window {

Left:25%

Width:676px

}

.window .top {

Width:626px

}

.window span {

Font-family: Microsoft Yahei

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

}

Js function:

The code is as follows:

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

}

});

});

Window code:

The code is as follows:

Setting required items in the application form

Basic information

0 name

0 mobile phone

0 enterprise

0 enterprise position

0 apply for a job

detailed information

0 place of origin

0 gender

0 birthday

0 nationality

0 political outlook

0 ID card

0 degree

0 phone call

0 fax

0 mailbox

Enterprise information

0 address

0 number of employees

0 legal representative

0 time of establishment

0 nature of the enterprise

Whether 0 is listed or not

0 Industry

0 URL

0 enterprise assets

Attachment

A copy of 0 business license

0 ID card photo

0 personal business card photos

This is a pop-up layer of form selection.

Picture material:

At this point, I believe you have a deeper understanding of "how to use div to imitate checkbox form style beautification and function". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.