layui-input-prefix/suffix 类仅在 Layui 2.8+ 版本生效，2.7.7 等旧版本会忽略导致图标错位；需用 position: absolute + z-index: 2 手动定位图标，并确保结构为 layui-form-item 包裹、input 带 layui-input 类且含唯一 name 属性。

layui-input-prefix/suffix 在 2.8+ 才生效

如果你用的是 layui-input-prefix 或 layui-input-suffix 类却没效果，先执行 layui.v 查版本——输出 "2.7.7" 就说明不支持。这两个类是 2.8 版本才内置的，老版本会直接忽略，图标堆在 input 外或错位。

替代方案必须手动定位：

• 外层容器加 position: relative
• 图标用 <i class="layui-icon"></i>，加 position: absolute + left: 10px（前缀）或 right: 10px（后缀）
• 务必设 z-index: 2，否则常被 input 边框盖住
• 小屏下慎用固定 right: 10px，建议改用 padding-right: 30px + box-sizing: border-box

结构必须用 layui-form-item 包裹

直接给 <input class="layui-input"> 加 padding 和伪元素，Layui 的样式重置会覆盖掉，图标对不齐、响应式错乱。正确做法是：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• 用 <div class="layui-form-item"> 作为最外层容器 <li>内部放 <code><div class="layui-input-block">，再把 input 和图标都塞进去 <li>input 必须带 <code>layui-input 类，否则宽度、边框、圆角全不对
• 图标不要用 img 或 SVG，统一用 <i class="layui-icon"></i>，比如 （用户图标）

表单提交时字段丢失的常见原因

明明 input 里有值，form.on('submit') 拿不到，或者 data.field 为空，大概率不是图标问题，而是 DOM 结构破坏了 Layui 的自动绑定逻辑：

• <input> 必须有 name 属性，且不能重复，例如 name="mobile"
• 禁止把 input 套在 <label></label> 里再插图标——Layui 会跳过这种嵌套结构
• 别用 display: none 或 visibility: hidden 隐藏原生 input，要用 border: none + background: transparent 替代
• 自定义验证规则中，回调函数的 elem 参数指向的是 input 节点，不是外层容器，别误写成 elem.parentNode.querySelector('input')

点击图标聚焦或清空需手写事件

Layui 不自动处理图标交互，点图标不聚焦、点 × 不清空都是默认行为。必须自己绑定：

• 聚焦：给图标加 onclick="this.nextElementSibling.focus()"（假设图标紧邻 input）
• 清空：后缀图标常用 （×），绑定 click 后清空 value 并触发 input 事件，否则校验和监听可能不同步
• 防重复绑定：如果 input 是动态添加的，事件要委托到父容器，或每次新增后重新绑定，避免多次触发
实际项目里最容易被忽略的，是老版本兼容性检查和 name 属性缺失——这两点导致的问题现象完全不像样式问题，调试时容易绕远路。