radio 和 checkbox 的样式本身是无法修改的,只能用标签去模拟。
这篇文章就详解了用HTML和CSS 模拟radio 和checkbox的效果。
网页链接
用label,例如:
.add_cart_radio{float:left
margin-top:0.5em
margin-right:0.5em
}
.add_cart_radio input[type="radio"]{
display:none
}
.add_cart_radio input[type="radio"] + label{
padding:0.2em 1em
border:1px solid #CCCCCC
border-radius:0.5em
color:#999
}
.add_cart_radio input[type="radio"]:checked + label{
padding:0.2em 1em
border:1px solid #FF6600
border-radius:0.5em
background:#FF6600
color:#FFFFFF
}
要是需要兼容的raio样式。只能用div和图片去模拟。不能使用input。这样对于样式就很好操作了。但是会出现一个问题就是要是有提交表单的信息的时候没有办法提交。所以需要设计到隐藏域的知识点。就是一个input 设置为hidden来传递数据。这样的话就可以做到兼容的有样式的radio