谷歌下: 页面和css如下
<!-- 选项按钮 --> <div style="overflow: auto; margin-left: 26%; margin-top: 2%;"> <div class="label-bth" style="margin-left: 3%;"> <label class="test-label"><input class="test-radio" checked name="Fruit" type="radio" value="01" id="qy" /> <span class="test-radioInput" onclick="qy();"></span>企业 </label> </div> <div class="label-bth" style="margin-left: 8%;"> <label class="test-label"><input class="test-radio" name="Fruit" type="radio" value="02" id="zrr" /> <span class="test-radioInput" onclick="zrr();"></span>自然人 </label> </div> </div>
.test-label { display: inline-block; color: #fff; min-80px; } .test-radio { display: none } .test-radioInput { background-color: #fff; border-radius: 100%; display: inline-block; height: 16px; margin-right: 10px; margin-top: -1px; vertical-align: middle; 16px; line-height: 1; } .test-radio:checked+.test-radioInput:after{ background-color: #52C2F8; border-radius: 100%; content: ""; display: inline-block; height: 12px; margin: 2px; 12px; }
页面效果如下:
由于要兼容ie8 所以 ie8 对伪元素和checked属性都不认识 所以加入了js
css修改为
.test-label { display: inline-block; color: #fff; min-80px; } .test-radio { display: none } .test-radioInput { background-color: #fff; border-radius: 100%; display: inline-block; height: 16px; margin-right: 10px; margin-top: -1px; vertical-align: middle; 16px; line-height: 1; behavior: url(/sjfwpt/swxxgxpt/swxxgxpt001/PIE.htc); } //关于伪元素的部分注释掉 /* .test-radio:checked+.test-radioInput:after{ background-color: #52C2F8; border-radius: 100%; content: ""; display: inline-block; height: 12px; margin: 2px; 12px; behavior: url(/sjfwpt/swxxgxpt/swxxgxpt001/PIE.htc); } */
js
function qy(){ $("#qy").parent().find('span.test-radioInput').css({"display": "inline-block","backgroundColor": "#52C2F8"}); $("#zrr").parent().find('span.test-radioInput').css({"display": "inline-block","backgroundColor": "#FFF"}); } function zrr(){ $("#zrr").parent().find('span.test-radioInput').css({"display": "inline-block","backgroundColor": "#52C2F8"}); $("#qy").parent().find('span.test-radioInput').css({"display": "inline-block","backgroundColor": "#FFF"}); }
$(function(){ //进入页面默认选择的是企业 颜色变色 $("#qy").parent().find('span.test-radioInput').css({"display": "inline-block","backgroundColor": "#52C2F8"}); })