本文主要是介绍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>
运行结果：
这篇关于input的type=‘radio‘设置只读属性颜色为灰色，如何修改的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
