超漂亮的選框checkbox效果用圖片模擬實現_Div+CSS教程

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

　　在DIV CSS構建的網頁中，表單一直是一個比較頭疼的問題，表單的布局與樣式的定義還需要更多的學習與思考，今天介紹另一款CSS表單，超炫的單選框與復選框效果。非常棒的感覺，希望對大家以后的布局有參考意義。

FF下代碼另存為查看：

代碼調試框 [www.zhaotila.cn]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>51css</title>
<style type="text/css">
/*<![CDATA[*/
a,label {
display:block;
width:25px;
height:25px;
overflow:hidden
}
a {
background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_82a5f3ae0299b6163a2cLk3uyVuFSv9J.gif") no-repeat
}
a:hover {
background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_be7c34d5508e4167e06crax6MCxxJrE7.gif") no-repeat
}
a#b {
background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_15613fd58c27b7022bb2fCqNnqRCmtIn.gif") no-repeat
}
/*]]>*/
</style>
</head>
<body>
<label for="cc">
<a href="#b" _fcksavedurl="#b" id="a" onclick="cc.checked=true">
<a href="#a" _fcksavedurl="#a" id="b" onclick="cc.checked=false">
<input type="checkbox" id="cc" />
</label>
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]

將checkbox拿出來，看著直觀點：

代碼調試框 [www.zhaotila.cn]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>51css</title>
<style type="text/css">
/*<![CDATA[*/
a,label {
display:block;
width:25px;
height:25px;
overflow:hidden
}
a {
background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_82a5f3ae0299b6163a2cLk3uyVuFSv9J.gif") no-repeat
}
a:hover {
background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_be7c34d5508e4167e06crax6MCxxJrE7.gif") no-repeat
}
a#b {
background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_15613fd58c27b7022bb2fCqNnqRCmtIn.gif") no-repeat
}
/*]]>*/
</style>
</head>
<body>
<label for="cc">
<a href="#b" _fcksavedurl="#b" id="a" onclick="cc.checked=true">
<a href="#a" _fcksavedurl="#a" id="b" onclick="cc.checked=false">
</label>
<input type="checkbox" id="cc" />
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]