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

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



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



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

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
/*OffstateforaARCcheckbox*/
#labcontent.checkboxOff{
    display:inline;
    margin:0px;
    padding:2px;/*NS6problem*/
    padding-left:20px;
    color:#666;
    line-height:16px;
    font-family:Verdana,Arial,Helvetica,sans-ser;
    font-size:.8em;
    background-image:url(checkbox_off.g);
    background-repeat:no-repeat;
    background-position:0%50%;
    border:0px;
}
/*OnstateforaARCcheckbox*/
#labcontent.checkboxOn{
    display:inline;
    margin:0px;
    padding:2px;/*NS6problem*/
    padding-left:20px;
    color:#000;
    line-height:16px;
    font-family:Verdana,Arial,Helvetica,sans-ser;
    font-size:.8em;
    background-image:url(checkbox_on.g);
    background-repeat:no-repeat;
    background-position:0%50%;
    border:0px;
}


/*OffstateforaARCcheckbox*/
#labcontent.altCheckboxOff{
    display:inline;
    padding:20px2px;/*NS6problem*/
    padding-left:70px;
    color:#666;
    line-height:60px;
    font-family:\"CourierNew\",Courier,mono;
    font-size:1.2em;
    background-image:url(alt_checkbox_off.g);
    background-repeat:no-repeat;
    background-position:0%50%;
    border:0px;
    cursor:poer;
}
/*OnstateforaARCcheckbox*/
#labcontent.altCheckboxOn{
    display:inline;
    padding:20px2px;/*NS6problem*/
    padding-left:70px;
    color:#000;
    line-height:60px;
    font-family:\"CourierNew\",Courier,mono;
    font-size:1.2em;
    font-weight:bold;
    background-image:url(alt_checkbox_on.g);
    background-repeat:no-repeat;
    background-position:0%50%;
    border:0px;
}


/*OffstateforaARCradiobutton*/
.radioOff{
    display:inline;
    margin:0px;
    padding:2px;
    padding-left:20px;
    color:#666;
    font:.8em/16pxVerdana,Arial,Helvetica;
    background:transparenturl(off.g)no-repeat0%50%;


}
/*OnstateforaARCradiobutton*/
.radioOn{
    display:inline;
    margin:0px;
    padding:2px;/*NS6problem*/
    padding-left:20px;
    color:#000;
    font:.8em/16pxVerdana,Arial,Helvetica;
    background:transparenturl(on.g)no-repeat0%50%;
}
/*useCSStofulleffectwithhoverstates.Ohhh,perty!*/
.radioOn:hover{
    background-image:url(on_hover.g);
}
.radioOff:hover{
    color:#333!important;
    background-image:url(off_hover.g);
}

/*AlternativeOffstateforaARCradiobutton*/
.altRadioOff{
    display:inline;
    margin:0px;
    padding:2px;
    padding-left:20px;
    color:#000;
    line-height:16px;
    font-family:Verdana,Arial,Helvetica,sans-ser;
    font-size:0.8em;
    background-image:url(alt_off.g);
    background-repeat:no-repeat;
    background-position:0%50%;
    border:0px;
    cursor:poer;
}
/*AlternativeOnstateforaARCradiobutton*/
.altRadioOn{
    display:inline;
    margin:0px;
    padding:2px;/*NS6problem*/
    padding-left:20px;
    line-height:16px;
    font-family:Verdana,Arial,Helvetica,sans-ser;
    font-size:.8em;
    background-image:url(alt_on.g);
    background-repeat:no-repeat;
    background-position:0%50%;
    border:0px;
    cursor:poer;
    text-decoration:underline;
}


　　

延伸阅读