HTML单选按钮（Radio）样式更改以及多选按钮（Checkbox）样式更改

单选按钮更改样式：

HTML代码：

<li> <div id="test3"> <label class="bt">人员（单选）</label> </div> <div class="dl dl1 dl2"> <div> <input id="check17" type="radio" name="PurchaseIdentity" value="test1"><label for="check17">test1</label> </div> <div> <input id="check18" type="radio" name="PurchaseIdentity" value="test2"><label for="check18">test2</label> </div> <div> <input id="check19" type="radio" name="PurchaseIdentity" value="test3"><label for="check19">test3</label> </div> </div> <span id="msgCategory" style="color: red;"></span> <div class="clear"></div> </li>

CSS样式代码：

div.dl label{border:none; background:url(../../images/icon_circle-empty.png) no-repeat left;background-size:0.3rem 0.3rem; padding-left:0.35rem;} div.dl input[type=radio]{display: none;} div.dl input[type=radio]:checked + label{ background:url(../../images/icon_circle-slelected.png) no-repeat left;background-size:0.3rem 0.3rem;}

示例：

附件图片：

多选按钮更改样式：

HTML代码：

<li> <div id="test4"> <label class="bt">星座（多选）</label> </div> <div class="duo"> <div> <input id="check22" type="checkbox" name="activity" value="test1"><label for="check22">test1</label> </div> <div> <input id="check23" type="checkbox" name="activity" value="test2"><label for="check23">test2</label> </div> <div> <input id="check24" type="checkbox" name="activity" value="test3"><label for="check24">test3</label> </div> <p class="clear"></p> <a class="Okcheck" href="javascript:;">确定</a> </div> </li>

CSS样式代码：

div.duo label{border:none; background:url(../../images/SmartShow/check.jpg) no-repeat left;background-size:0.3rem 0.3rem; padding-left:0.35rem;} div.duo input[name=activity]{display: none;} div.duo input[name=activity]:checked + label{ background:url(../../images/SmartShow/checked.jpg) no-repeat left;background-size:0.3rem 0.3rem;}

示例：

附件图片：