单选按钮更改样式:
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;}
示例: