如果觉得设置样式太麻烦,或者页面上选中的样式太复杂,也可以用背景图去修改样式<div class=""> <label><input type="radio" name="1"><i class="spot"></i>123456</label> <label><input type="radio" name="1"><i class="spot"></i>123456</label></div>
<style> label{ display:inline-block; width:200px; height:50px; line-height:.8rem; text-align:left; position: relative; } label input{ width: 15px; height: 15px; vertical-align: bottom; margin-right:.1rem; opacity: 0; } .spot{ display:inline-block; width:17px; height:17px; background:url("image/radio.png") no-repeat; /*默认的样式图片*/ background-size:16px; position: absolute; top:.2rem; left:0; z-index:5; } input:checked + .spot{ background:url("image/checked.png") no-repeat; /*选中后的样式图片*/ background-size:16px; }</style>
时间: 2024-11-06 07:15:13