Layui表单元素边框颜色改不了是因为原生input/select等被替换为伪元素容器，需修改.layui-input、.layui-select-title等可见节点样式并加!important。
layui表单元素边框颜色改不了？先确认是不是被伪元素覆盖了
原生 input、select、textarea 在 layui 中会被替换为带 .layui-input、.layui-select-title 等类的伪元素容器，直接给 input 写 border-color 无效——它还在 DOM 里，但完全不可见。
真正起作用的是渲染后生成的节点：
-
.layui-input（文本框/数字框/邮箱等） -
.layui-textarea（多行文本） -
.layui-select-title（下拉框顶部标题栏） -
.layui-form-select（整个下拉容器外框） -
.layui-checkbox和.layui-radio的外层包裹节点
这些才是你该下手的地方，且必须加 !important 才能压过 layui 默认样式权重。
修改 input / textarea 边框色的稳妥写法
别碰 input 标签本身，盯住 .layui-input 和 .layui-textarea：
.layui-input {
border-color: #4a9ff5 !important;
border-width: 2px !important;
}
.layui-textarea {
border-color: #4a9ff5 !important;
border-radius: 4px !important;
}注意两点：
- 必须用
!important，layui 内联或高权重规则会覆盖普通声明 - 如果用了
lay-verifiy触发校验失败状态，.layui-form-danger类会强制覆盖边框色，得额外写：.layui-form-danger .layui-input { border-color: #f57c00 !important; }
select 下拉框边框怎么单独调？别动原始 select
原始 <select> 已被隐藏，它的边框毫无意义。真正要改的是渲染后的两个层级：
-
.layui-form-select：整个下拉控件外框（含箭头区域），适合改整体边框 -
.layui-select-title：顶部可点击区域，适合只改“输入区”边框
示例（只改标题栏边框）：
.layui-select-title {
border-color: #2ecc71 !important;
border-radius: 2px !important;
}
/* 错误示范：下面这句完全没用 */
select { border-color: red !important; }如果想让下拉展开时也保持一致边框，还得补一句：
.layui-form-select .layui-select-dropdown {
border-color: #2ecc71 !important;
}checkbox / radio 边框颜色怎么同步改？重点在伪元素
layui 的复选框和单选框是纯 CSS 绘制的，真实 input[type="checkbox"] 没有边框样式。真正控制“方框轮廓”的是：
- v2.8+：
.layui-form-checkbox::before和.layui-form-radio-i - v2.7 及更早：
.layui-form-checkbox i和.layui-form-radio i
推荐写法（兼容新旧版本）：
.layui-form-checkbox::before,
.layui-form-checkbox i,
.layui-form-radio-i,
.layui-form-radio i {
border-color: #9b59b6 !important;
}注意：
- 别漏掉
::before，它是 v2.8+ 的主要边框载体 - 移动端点击区域小？同步加大
width和height，否则视觉边框和可点区域不一致 - 如果只在某张表单生效，给父容器加 class（如
<form class="my-form">），CSS 改成.my-form .layui-form-checkbox::before
边框颜色这事，核心就一条：别跟原始表单标签较劲，谁被渲染出来、谁在页面上可见，就改谁。layui 的“替换式渲染”决定了你必须顺着它的 DOM 结构走，而不是按 HTML 原意去猜。
