关于radio 修改样式问题

最新推荐文章于 2024-07-29 14:03:25 发布

weixin_33804990

最新推荐文章于 2024-07-29 14:03:25 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ylboke/p/9685214.html

本文介绍了一种在不支持伪元素和checked属性的IE8浏览器中实现自定义样式的Radio Button的方法。通过使用JavaScript和特定的CSS技巧，如PIE.htc文件，可以实现在现代浏览器和IE8中一致的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

谷歌下：页面和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);
} */

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"});
})

转载于:https://www.cnblogs.com/ylboke/p/9685214.html