input样式需统一重置appearance、placeholder、focus和移动端适配：重置appearance消除浏览器差异；显式设置::placeholder各前缀并加opacity:1；focus用box-shadow替代outline；移动端设font-size≥16px、min-height、viewport。
input[type="text"]、input[type="email"] 等默认样式差异明显
浏览器对不同 type 的 <input> 会应用略有不同的默认外观：比如 input[type="number"] 在 Chrome 中右侧带微调按钮，input[type="search"] 在 Safari 中有圆角和清除图标，而 input[type="text"] 则最“朴素”。这种差异在初级项目里尤其突兀——同一表单里几个输入框看起来像来自不同年代。
根本原因不是 bug，而是各浏览器 UA 样式（User Agent Stylesheet）对不同 type 的 appearance、padding、border-radius 处理不一致。解决思路不是逐个 type 覆盖，而是用一套基础重置兜底：
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ccc;
padding: 8px 12px;
font-size: 14px;
line-height: 1.4;
border-radius: 4px;
box-sizing: border-box;
}
注意：appearance: none 必须写全三端前缀，否则 Safari 下 search 或 number 仍保留原生控件。
placeholder 文字颜色和垂直对齐总不一致
::placeholder 伪元素在不同浏览器中默认样式不同：Chrome 默认浅灰，Firefox 更淡，且部分老版本需要前缀；更隐蔽的问题是，当设置 line-height 或 height 后，placeholder 垂直居中常偏上或偏下。
立即学习“前端免费学习笔记（深入）”；
统一方案是显式声明所有主流前缀，并配合 padding 控制内容区域，避免依赖 line-height 居中：
input::placeholder {
color: #999;
opacity: 1;
}
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
关键点：
-
opacity: 1是必须的，否则 Firefox 默认 opacity 为 0.53 - 不要用
height+line-height强制居中 placeholder，改用padding-top/padding-bottom微调 - 如果项目需支持 IE11，
:-ms-input-placeholder不能省略
focus 状态下 outline 和 border 混乱，影响可访问性
直接写 outline: none 是初级项目中最常见的反模式——它抹除了键盘用户的焦点指示，违反 WCAG。但保留默认 outline 又常和自定义 border 冲突，导致 focus 时出现双线或错位。
正确做法是用 outline 模拟 border 效果，同时确保焦点可见：
input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
这样既去掉原生 outline 的“毛边感”，又通过 box-shadow 提供清晰焦点环。注意两点：
-
box-shadow的扩散半径（第四个值）建议设为2px，太小不可见，太大遮挡内容 - 若用了
border-radius，box-shadow会自动跟随圆角，无需额外处理 - 务必测试 Tab 键导航，确认焦点进入/离开时视觉反馈明确
移动端 input 高度异常、光标错位、缩放失效
在 iOS Safari 或 Android Chrome 中，input 容易出现：文字被截断、光标贴顶、双击放大被禁用等问题。根源常是未适配视口或误用尺寸单位。
关键修复项：
- 确保
<meta name="viewport">存在且含user-scalable=yes（除非明确禁止缩放） - 避免对
input设height，改用min-height+padding控制高度 - 给
input加font-size: 16px或更大，iOS 会自动禁用双击缩放，这是有意为之的可访问性机制 - 如需强制允许缩放，加
-webkit-text-size-adjust: 100%，但慎用——可能影响阅读体验
最稳妥的移动端基础样式：
input {
font-size: 16px;
min-height: 40px;
padding: 8px 12px;
}
真正麻烦的不是写多少 CSS，而是意识到：每个看似简单的 input 其实承载着浏览器兼容、可访问性、移动端适配三层约束。漏掉任意一层，上线后都可能在某个设备上“突然不工作”。
