<ul> <li><label class="my_protocol"><input type="radio" name="leixing" class="input_agreement_protocol"><span></span>身份证</label></li> <li><label class="my_protocol"><input type="radio" name="leixing" class="input_agreement_protocol"><span></span>军官证</label></li> <li><label class="my_protocol"><input type="radio" name="leixing" class="input_agreement_protocol"><span></span>护照</label></li> </ul>
/*隐藏checkbook*/ .my_protocol .input_agreement_protocol { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: none; } /*未被选中时*/ .my_protocol .input_agreement_protocol + span { display: inline-block; width: 0.8rem; height: 0.8rem; background: url("../images/icon_check.png") no-repeat; background-size: cover; margin-right: 0.4rem; float: left; } /*选中checkbox时,修改背景图*/ .my_protocol .input_agreement_protocol:checked + span { background: url("../images/icon_checkbox_checked.png") no-repeat; background-size: cover; }