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

本文主要是介绍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>

运行结果：