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 的样式重置会覆盖掉，图标对不齐、响应式错乱。正确做法是：
- 用
<div class="layui-form-item">作为最外层容器 - 内部放
<div class="layui-input-block">，再把 input 和图标都塞进去 - input 必须带
layui-input类，否则宽度、边框、圆角全不对 - 图标不要用 img 或 SVG，统一用
<i class="layui-icon">，比如（用户图标）
表单提交时字段丢失的常见原因
明明 input 里有值，form.on('submit') 拿不到，或者 data.field 为空，大概率不是图标问题，而是 DOM 结构破坏了 Layui 的自动绑定逻辑：
-
<input>必须有name属性，且不能重复，例如name="mobile" - 禁止把 input 套在
<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 是动态添加的，事件要委托到父容器，或每次新增后重新绑定，避免多次触发
