layui单选框选中后文字颜色不生效，因原生radio被隐藏且伪元素绘制选中效果，css无法通过input:checked触发；应改用高权重选择器命中span或用javascript监听radio事件动态设色。
layui单选框选中后文字颜色不生效的常见原因
直接给 <input type="radio"> 加 checked 状态样式（如 input[type=radio]:checked + label）基本无效——Layui 会隐藏原生 radio，用伪元素绘制选中效果，真实 DOM 中看不到勾选状态，CSS 无法触发。
必须改 .layui-form-radio 的 ::after 伪元素
Layui 单选框的视觉“选中”由 .layui-form-radio[lay-skin="primary"]::after 控制，文字颜色则取决于包裹它的 label 或 span 元素。但 label 本身没绑定 checked 状态，所以不能靠 input:checked + label 变色。
实操建议：
- 给单选框容器加唯一 class，比如
<div class="my-radio-group"><input name="type" value="1"></div> - 在 CSS 中用高权重选择器命中已选中的 radio 对应的 label：
.my-radio-group .layui-form-radio > input:checked + span { color: #ff5722 !important; } - 注意：Layui v2.8+ 的 radio 结构是
<input><span>文字</span>，span是文字载体；v2.7 及更早版本可能是<i></i><span></span>，需确认结构 - 别漏
!important，否则被 Layui 内联样式或默认主题覆盖
用 JavaScript 动态切换文字颜色更可靠
监听 form.on('radio(filterName)') 事件，在回调里手动修改对应 label 的颜色，避免 CSS 权重博弈。
示例：
form.on('radio(status)', function(data){
// 清除所有同组 radio 文字颜色
layui.$('.layui-form-radio').find('span').css('color', '');
// 给当前选中的加色
layui.$(data.elem).closest('.layui-form-radio').find('span').css('color', '#27ae60');
});
要点：
-
data.elem是当前被点击的<input>元素，不是 label -
.closest('.layui-form-radio')找到它所属的单选框容器，再找里面的span - 如果页面有多个 radio 组，务必用不同
filterName区分，避免互相干扰 - 此法兼容所有 Layui 版本，且 reload 后仍有效（只要事件监听在 render 之后注册）
容易被忽略的细节：字体颜色和背景色要一起调
单选框选中时，如果背景色变深（比如 .layui-form-radio[lay-skin="primary"]:hover），纯改文字颜色可能对比度不足，肉眼难辨。
建议同步控制：
- 选中态 label 的
color和background-color配套调整 - 禁用态（
disabled）也要单独处理，否则灰色文字叠加灰色背景就看不见了 - 移动端点击反馈区域小，可适当加大
span的padding，提升可点性
