谷歌下: 頁面和css以下javascript
<!-- 選項按鈕 --> <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; }
頁面效果以下:css
因爲要兼容ie8 因此 ie8 對僞元素和checked屬性都不認識 因此加入了jshtml
css修改成java
.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); } */
jsui
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"}); })