重置 input 样式需先设 appearance: none 和 box-sizing: border-box，显式声明 font-family/font-size，用 padding 控制高度，:focus 用 box-shadow 替代 outline，::placeholder 加全前缀，响应式按容器宽度而非屏幕断点。
直接改 input 的默认样式会踩一堆兼容性坑，尤其是 Safari 对 input[type="password"] 的内边距、Chrome 的 outline 渲染、Firefox 的 placeholder 对齐都不一致。必须先重置再定制，否则越调越乱。
重置 appearance 和 box-sizing 是第一步
不同浏览器对原生控件渲染逻辑不同，appearance: none 能统一清除系统级样式（比如 Safari 的圆角+内边距），但要注意：它会让 select 失去默认下拉箭头，checkbox 变成空白——所以只对 input[type="text"] 和 input[type="password"] 用最安全。
-
box-sizing: border-box必加，否则padding会让实际宽度超出设定值 -
font-family和font-size显式声明，避免 iOS 自动缩放或 Windows 渲染模糊 - 别碰
height：用padding控制高度，文字才能视觉居中；设height: 40px+padding: 10px会导致文字顶着上边框
:focus 状态必须手动补全可访问性
移除 outline 后，键盘用户 Tab 切换就看不到焦点在哪了。不能只靠 border-color 变化，得叠加 box-shadow 做外发光。
- 推荐写法：
input:focus { outline: none; border-color: #4a90e2; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2); } - 颜色选蓝系（如
#4a90e2）是因它在深色/浅色背景上对比度都达标（WCAG AA 级） - 别用
transition: all，只写transition: border-color 0.2s, box-shadow 0.2s，避免其他属性意外动画
::placeholder 伪元素要加全浏览器前缀
Firefox 用 ::-moz-placeholder，WebKit 用 ::-webkit-input-placeholder，现代标准是 ::placeholder。三者不共存，浏览器只会认自己支持的那个。
立即学习“前端免费学习笔记（深入）”；
- 必须全部写上，否则 iOS Safari 占位符不生效或颜色错乱
- 别设
opacity: 0.5—— 它会让占位符和输入文本的对比度跌破 4.5:1，过不了无障碍检测 - 推荐颜色：
#9aa3b1（浅灰蓝），比纯灰更柔和，且与#333文本色区分明显
响应式不是按屏幕宽度切，而是按内容撑开程度切
写 @media (max-width: 768px) 很容易在 iPad 横屏或桌面缩放时失效。应该监听表单容器的实际宽度。
- 给
form设max-width: 400px，然后用@media (max-width: 400px)做断点 - 小屏下
input改为width: 100%，但加max-width: 280px防止拉太长 - 慎用
vw单位设字体大小——横屏时文字会突然变小，iOS 还可能触发强制缩放
真正难的不是加阴影或改圆角，而是让所有浏览器对齐 padding、line-height 和光标位置。哪怕只差 1px，用户就会觉得“这个输入框点起来怪怪的”。
