关于radio 修改样式问题
谷歌下: 页面和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-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"});
})

浙公网安备 33010602011771号