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

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

缂佸洦鈪礑edeCMS鐟欏棝顣堕弫娆戔柤娑旀壆鈹栭梻锟� 缁夌喐婀囬崝鈥虫珤闁缍夌涵鏇氱鞍閼辨棑绱� 閺冪姴鍜栫粩娆撴毐瀹搞儱鍙�,閻ф儳瀹抽弶鍐櫢娑撯偓闁款喖鍙忛弻锟�!

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

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