怎么用CSS控制表单中的RADIO样式？

html-css023

怎么用CSS控制表单中的RADIO样式？,第1张

用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

}

<input style="transform: scale(5,5)" type="radio" />

css代码效果为，把input radio放大5倍，同理，这个放大属性可用在input checkbox上。

但使用时需注意兼容性！

能。

示例如下：

HTML：

<input type="radio"  class="rdBox" value="Male" />男

<input type="checkbox" class="chBox" value="one" />1

<input type="checkbox" class="chBox" value="two" />2

CSS:

.rdBox,.chbox{width:100pxheight:100px}