要实现下面单选按钮组的选中状态用图片显示:
html结构:
<div class="select-radio-box"> <div class="select-box"> <input value="0" type="radio" name="sex" id="male" checked="checked"> <label for="male">男士</label> </div> <div class="select-box"> <input value="1" type="radio" name="sex" id="female"> <label for="female">女士</label> </div> <div class="select-box"> <input value="2" type="radio" name="sex" id="secrecy"> <label for="secrecy">保密</label> </div> </div>
样式:
/*单选按钮 Begin*/ .select-radio-box { display: inline-block; } .select-box { display: inline-block; margin-right: 78px; box-sizing: border-box; padding-left: 42px; position: relative; } .select-box input { width: 0; height: 0; margin-right: 12px; position: absolute; top: 0; left: 0; z-index: 0; } /*input 选中前的样式*/ .select-box input[type="radio"] + label:before { content: "a0"; /*不换行空格*/ display: inline-block; width: 20px; height: 20px; background-color: #ffffff; border-radius: 2px; border: solid 1px #dddddd; vertical-align: middle; margin-right: 12px; position: absolute; top: 32px; left: 0; behavior:url("/jrcz/js/pie_file/PIE.htc"); } /*input 选中后的样式 */ .select-box input[type="radio"]:checked + label:before { border: solid 1px #2266cb; background:#2266cb url(../images/icons/get_icon.png) no-repeat center center;/*背景图的写法是生效的*/ }