Div+Css教程模板無憂>建站教程>Div+Css教程>DIV+CSS實(shí)例>

DOV CSS表單：超炫的單選框與復(fù)選框效果！-Adam_DIV+CSS實(shí)例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　在DIV CSS構(gòu)建的網(wǎng)頁中，表單一直是一個比較頭疼的問題，表單的布局與樣式的定義還需要更多的學(xué)習(xí)與思考，今天介紹一款CSS表單，超炫的單選框與復(fù)選框效果。非常棒的感覺，希望對大家以后的布局有參考意義。
　　我們看正常情況下此表單的效果：

　　我們看經(jīng)過CSS樣式定義后的效果：

　　實(shí)現(xiàn)這樣的效果，作者除了對表單元素進(jìn)行樣式定義，還用JS對其進(jìn)行了控制。

　　我們看下面的CSS代碼：

示例代碼 [m.ghpqjb.com]

/* Off state for a ARC checkbox */
#labcontent .checkboxOff {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
color: #666;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
background-image: url(checkbox_off.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
}
/* On state for a ARC checkbox */
#labcontent .checkboxOn {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
color: #000;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
background-image: url(checkbox_on.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
}

/* Off state for a ARC checkbox */
#labcontent .altCheckboxOff {
display: inline;
padding: 20px 2px; /* NS 6 problem */
padding-left: 70px;
color: #666;
line-height: 60px;
font-family: "Courier New", Courier, mono;
font-size: 1.2em;
background-image: url(alt_checkbox_off.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
cursor: pointer;
}
/* On state for a ARC checkbox */
#labcontent .altCheckboxOn {
display: inline;
padding: 20px 2px; /* NS 6 problem */
padding-left: 70px;
color: #000;
line-height: 60px;
font-family: "Courier New", Courier, mono;
font-size: 1.2em;
font-weight: bold;
background-image: url(alt_checkbox_on.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
}

/* Off state for a ARC radio button */
.radioOff {
display: inline;
margin: 0px;
padding: 2px;
padding-left: 20px;
color: #666;
font: .8em/16px Verdana,Arial,Helvetica;
background: transparent url(off.gif) no-repeat 0% 50%;
}
/* On state for a ARC radio button */
.radioOn {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
color: #000;
font: .8em/16px Verdana,Arial,Helvetica;
background: transparent url(on.gif) no-repeat 0% 50%;
}
/* use CSS to full effect with hover states. Ohhh, perty! */
.radioOn:hover {
background-image: url(on_hover.gif);
}
.radioOff:hover {
color: #333 !important;
background-image: url(off_hover.gif);
}

/* Alternative Off state for a ARC radio button */
.altRadioOff {
display: inline;
margin: 0px;
padding: 2px;
padding-left: 20px;
color: #000;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-image: url(alt_off.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
cursor: pointer;
}
/* Alternative On state for a ARC radio button */
.altRadioOn {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
background-image: url(alt_on.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
cursor: pointer;
text-decoration: underline;
}