直接改css无效是因为layer.tips动态创建并内联样式，优先级高于全局css；须手动调用并传参style及tips方向；多字段验证需缓存并关闭旧提示；右侧红字提示应弃用tips，改用同级元素+绝对定位实现。
直接改 CSS 为什么无效
Layui 的 layer.tips 提示框是动态创建的，内联样式优先级远高于你写的全局 CSS。比如 .layui-layer-tips 上的 color、background-color 都被 JS 硬编码写死，你改 layui.css 或加 !important 都没用——它压根不走那个类的渲染链。
必须手动调用 layer.tips 并传参
想换颜色、改圆角、调字体大小，唯一可靠方式是在验证规则里放弃 return 字符串，改用手动调用：
-
return false阻止默认提示，避免干扰 - 用
layer.tips('提示文字', elem, {tips: [2, '#2196F3'], style: 'background-color:#e3f2fd; color:#1976d2; border-radius:4px; font-size:13px;'}) -
style参数支持任意内联样式，包括box-shadow、padding、line-height等 - 注意
tips: [2, '#2196F3']中的2是方向（右），不能写成字符串或漏掉颜色
多个字段连续验证时提示重叠怎么办
默认 layer.tips 不会自动关闭前一个，快速失焦/聚焦多个输入框会导致提示堆叠、错位甚至卡死：
- 声明一个变量存当前提示索引：
let currentTip = null - 每次调用前先关掉旧的：
if (currentTip) layer.close(currentTip) - 再赋新值：
currentTip = layer.tips(...) - 别依赖
time自动销毁——它只控制单个存活时长，不解决多实例共存问题
静态红字右侧提示要彻底弃用 tips
如果目标是“输入框右侧固定红字”，不是悬浮气泡，layer.tips 再怎么调也做不到：
- 必须在 HTML 里为每个
<input>同级加一个容器，如<div class="verify-right"></div> - 利用
.layui-form-item默认的position: relative做锚点 - CSS 写死定位：
.verify-right { position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: #FF5722; } - 验证时用
$(elem).next('.verify-right').text('不能为空')更新内容，清空时设为空字符串
真正难的不是写样式，而是确保父容器没被 overflow: hidden 截断，且没额外加 transform 破坏绝对定位锚点——这两个细节一错，红字就消失或飞走。
