DIV+CSS表单：超炫的单选框与复选框效果！ - Adam's

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


　　我们看经过CSS样式定义后的效果：


　　实现这样的效果，作者除了对表单元素进行样式定义，还用JS对其进行了控制。
　　点击下面的链接，查看运行效果：
　　http://www./attachments/month_0703/366/52css_com.html
　　我们看下面的CSS代码：

Example Source Code [www.]/* 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);

   用户名: (新注册)  密码: 匿名评论 [所有评论]     注意:（评论内容不能超过250字,需审核后才会公布,可以匿名评论,请自觉遵守互联网相关政策法规。）