超漂亮的选框checkbox效果用图片模拟实现_Div+CSS教程

教程Tag：暂无Tag,欢迎添加,赚取U币!

缂傚倷绀佸ú锕傚焻缁€鎱筪eCMS闁荤喐鐟ュΛ婵嬨€傞崼鏇炴瀬婵炲棙鍨熼弻锟�婵炴垶姊规竟鍡涘煘閺嶎厽鈷掗柨鐕傛嫹缂備礁顦遍崰鎰耿閸ヮ剙绀夐柍銉ㄦ珪閻濓拷闂備緡鍋勯ˇ杈╃礊婢跺本鍏滈柡鍥ㄦ皑闂夊秹鏌ゆ潏銊︻棖缂佹唻鎷� 闂佸搫鍟版慨鎾椽閺嶎偆鍗氭繛鍡樻尰濮ｆ劗鈧鎮堕崕閬嶅矗閿燂拷,闂佽皫鍕姢閻庤濞婂鍫曞礃椤斿吋顏熸繛鎴炴尨閸嬫捇姊哄▎鎯ф灈闁告瑥绻樺濠氭晸閿燂拷!

　　在DIV CSS构建的网页中，表单一直是一个比较头疼的问题，表单的布局与样式的定义还需要更多的学习与思考，今天介绍另一款CSS表单，超炫的单选框与复选框效果。非常棒的感觉，希望对大家以后的布局有参考意义。

FF下代码另存为查看：

代码调试框 [www.mb5u.com]

<!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.mb5u.com]

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

[ 可先修改部分代码再运行查看效果 ]