關於radio 修改樣式問題

谷歌下: 頁面和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"});
})
相關文章
相關標籤/搜索