谷歌下: 页面和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" οnclick="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" οnclick="zrr();"></span>自然人 </label>
</div>
</div>
.test-label {
display: inline-block;
color: #fff;
min-width: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;
width: 16px;
line-height: 1;
}
.test-radio:checked+.test-radioInput:after{
background-color: #52C2F8;
border-radius: 100%;
content: "";
display: inline-block;
height: 12px;
margin: 2px;
width: 12px;
}
页面效果如下:
由于要兼容ie8 所以 ie8 对伪元素和checked属性都不认识 所以加入了js
css修改为
.test-label {
display: inline-block;
color: #fff;
min-width: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;
width: 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;
width: 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"});
})