怎样修改radio和checkbox的样式?

html-css010

怎样修改radio和checkbox的样式?,第1张

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