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;}

示例：

附件图片：