layui单选框如何去掉默认的蓝色激活边框

作者：袖梨 2026-08-23

要精准移除Layui单选框点击后的蓝色边框，需覆盖其伪元素样式：.layui-form-radio i::after { border-color: transparent !important;}，并注意皮肤适配、加载时机、作用域隔离及移动端点击区域优化。

layui单选框点击后蓝色边框是什么

那个蓝色边框不是 outline，而是 Layui 自己用伪元素（::after）模拟的焦点反馈效果。它和原生 input[type="radio"] 无关——Layui 渲染时已把原生 radio 隐藏，替换为带样式的 .layui-form-radio 容器和内部圆点。所以改 input:focus 完全无效。

怎么精准干掉这个蓝色边框

必须覆盖 .layui-form-radio 的伪元素样式。Layui v2.8+ 默认用 .layui-form-radio>i::after 绘制外圈高亮，它的 border-color 就是蓝色来源。

加这段 CSS 到页面末尾或自定义样式文件中：

.layui-form-radio i::after {border-color: transparent !important;}

如果用了 skin="primary" 或其他皮肤，需同步覆盖对应选择器：.layui-form-radio[lay-skin="primary"] i::after
别漏掉 !important——Layui 内联注入的样式权重很高
不要只清 outline 或 box-shadow，那对 Layui radio 毫无作用

为什么加了 CSS 还有残留蓝线

常见原因不是代码写错，而是作用域或时机问题：

样式加载太早：Layui 在 form.render() 后才插入 DOM 结构，CSS 提前加载可能被后续内联样式覆盖。建议把自定义样式放在 <head> 底部，或用 setTimeout(() => {}, 0) 延迟注入
作用域隔离：Vue 单文件组件里用了 <style scoped>，会导致选择器失效。要么去掉 scoped，要么用 :deep(.layui-form-radio i::after)
父级限定过宽：全局写 .layui-form-radio i::after 会影响所有 radio。只想改某一块，给容器加 class，比如 <div class="no-radio-focus">...</div>，然后写 .no-radio-focus .layui-form-radio i::after