要精准移除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 提前加载可能被后续内联样式覆盖。建议把自定义样式放在底部，或用setTimeout(() => {}, 0)延迟注入 - 作用域隔离：Vue 单文件组件里用了
<style scoped></style>，会导致选择器失效。要么去掉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
移动端点击区域变小怎么办
清掉蓝色边框后，i 元素的视觉点击区没变，但用户感知会弱。Layui 的 i 标签默认宽高只有 18px，远小于推荐的 44px 最小触控尺寸。
- 同步放大伪元素可点区域：
.layui-form-radio i { width: 24px; height: 24px; } - 确保
i::before（实心圆点）和i::after（外圈）的transform: scale()不被意外重置 - 真要兼顾可访问性，不建议完全移除焦点反馈，可用灰色边框替代：
border-color: #999 !important;
