input的type=‘radio‘设置只读属性颜色为灰色，如何修改

1.设置input和label的样式为不可点击。

2.设置input的readonly属性。

3.若想变回可修改，用js实现

4.如何自定义radio的颜色。

5.完整代码

input的单选框有时候需要实现只读，两个办法，一个disabled，一个是readonly.

但disabled设置后，颜色为灰色，如图所示，有时候会不明显。

readonly设置后，还是可以修改。

在网上试了好多种方法都不行，找到一个可以实现。如下

1.设置input和label的样式为不可点击。

<style type="text/css">
	label{
		pointer-events: none;
	}
	input{
		pointer-events: none;
	}
</style>

2.设置input的readonly属性。

<input type="radio" id="aaa"  name="made" value="aaa"   checked="checked" readonly="readonly"/>
<label for="aaa">第一</label>
<input type="radio" id="bbb" name="made" value="aaa" readonly="readonly" />
<label for="bbb">第二</label>

3.若想变回可修改，用js实现

$('input[type="radio"]').css("pointer-events","auto");
$('label').css("pointer-events","auto");

这样就能实现既不能修改，又显示颜色。

4.如何自定义radio的颜色。

input{
	accent-color: red;//选中后的颜色
}

5.完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			label{
				pointer-events: none;
			}
			input{
				pointer-events: none;
				 accent-color: red;
			}
		</style>
	</head>
	<body>
		<input type="radio" id="aaa"  name="made" value="aaa"   checked="checked" readonly="readonly"/>
		<label for="aaa">第一</label>
		<input type="radio" id="bbb" name="made" value="aaa" readonly="readonly" />
		<label for="bbb">第二</label>
		
		<h1></h1>
		<div id="cds">
			<button type="button" onclick="changeFn()">可修改</button>
		</div>
		<script type="text/javascript">
			function changeFn(){
				$('input[type="radio"]').css("pointer-events","auto");
				$('label').css("pointer-events","auto");
			}
		</script>
	</body>
</html>

运行结果：