input无边框需同时设border:0和outline:none（配合:focus），并用border-bottom或box-shadow提供焦点反馈；必须设置::placeholder兼容样式，避免ios键盘重影可加-webkit-appearance:none和transform:translatez(0)。
input边框消失但保留可编辑状态
直接用 border: none 会让输入框失去所有边框，但有时光标不显示、焦点不明显，甚至在 Safari 中触发默认阴影或圆角异常。真正要的是「视觉无边框」+「功能完整」。
- 必须同时清除
outline（否则聚焦时出现难看的蓝色外框） - 推荐用
border: 0而非border: none，更稳妥兼容老版 IE 和某些移动端渲染 - 如果背景色和父容器一致，还要确认
background没被意外设为透明导致文字“看不见” - 示例：
input[type="text"] { border: 0; outline: none; background: #fff; }
聚焦时加下划线替代边框
纯去边框后用户可能分不清当前焦点在哪，尤其表单字段多时。下划线是最轻量又明确的反馈方式。
- 用
border-bottom单独控制底部线条，其他三边保持border: 0 - 聚焦时用
:focus改变颜色或加过渡：input { border: 0; border-bottom: 1px solid #ccc; }<br>input:focus { border-bottom-color: #007bff; outline: none; } - 注意：Chrome 默认会加
outline，不显式写outline: none就会双线叠加
移动端软键盘弹出后边框重影问题
iOS Safari 在唤起键盘后偶尔会重新渲染 input，把原本隐藏的边框“闪”出来一下，尤其是用了 appearance: none 或自定义样式时。
- 加上
-webkit-appearance: none可消除部分系统默认样式干扰 - 避免用
box-shadow: inset模拟边框——某些 iOS 版本会与键盘动画冲突，产生残留灰影 - 若仍出现，可强制重绘：
input { transform: translateZ(0); }（触发硬件加速，减少渲染抖动）
配合 placeholder 文字颜色统一处理
边框去掉后，placeholder 成为重要视觉提示，但它的颜色默认很淡，且各浏览器默认值不同。
- 必须单独设置
::placeholder伪元素，不能只靠color继承 - 记得补全兼容写法：
input::placeholder { color: #999; }<br>input::-webkit-input-placeholder { color: #999; }<br>input::-moz-placeholder { color: #999; } - 如果 input 设置了
color: #333，placeholder 却没覆盖，就会显得突兀甚至看不清
outline: none 和 ::placeholder 的兼容写法，一两个地方没填上，整套“无边框”就变成“半残废”。特别是需要适配 iOS + Android + PC 多端时，得逐个环境点开 DevTools 验证 focus 状态是否真干净。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
