layui单选框文字大小需通过css控制,核心是精准定位渲染后的.layui-radio-title节点并用!important覆盖内置样式,避免泛化选择器影响其他组件。

layui 单选框本身不提供直接设置字体大小的配置项,它的文字大小由 CSS 控制,但不能简单套用通用选择器——因为 layui 会用 !important 覆盖外部样式,且单选框文字实际是 label 或伪元素渲染,不是 input 自身。
为什么直接写 .layui-form-item label { font-size: 14px; } 失效?
常见错误是全局覆盖 label 或 .layui-form-label,但 layui 表单中单选框的文字通常不在 .layui-form-label 里,而是紧贴在 input[type="radio"] 后面的文本节点,或由 title 属性生成的 label(比如 <input type="radio" title="男">)。Layui 渲染后会把 title 转成带 layui-radio-title 类的 span,这个节点才是目标。
- 直接改
label可能影响表单其他 label(如输入框标题),污染范围大 - layui 内部样式用了
!important,普通权重不够 -
input[type="radio"]本身不可设字体,必须作用于其后的文字容器
精准定位并修改单选框文字大小
关键找对渲染后的 DOM 结构:Layui 把 title="选项名" 渲染为 <span class="layui-radio-title">选项名</span>,父级是 .layui-form-radio。所以应针对这个类下手:
- 用
.layui-form-radio .layui-radio-title { font-size: 14px !important; } - 如果用了自定义
label包裹(非title方式),则写.layui-form-radio + label { font-size: 14px !important; }(注意 + 是相邻兄弟选择器) - 若要统一所有单选文字(含 disabled 状态),加
.layui-form-radio[disabled] .layui-radio-title单独处理
避免影响其他组件的写法技巧
不要用泛化的选择器如 .layui-form-item * { font-size: ... },这会连带改下拉框、开关等所有子元素。推荐限定作用域:
- 给单选组外层加自定义 class:
<div class="layui-form-item my-radio-group">...</div> - 然后写
.my-radio-group .layui-radio-title { font-size: 16px !important; } - 如果只改某几列,可在 column 的
templet或cellStyle里动态插入带 style 的 span,但仅适用于表格内单选
真正生效的关键就两点:找到 .layui-radio-title 这个真实承载文字的节点,并用 !important 确保优先级压过 layui 内置样式。漏掉任一,字体大小都不会变。











