必须用 CSS 重写视觉层，box-sizing: border-box 不可省略，否则 width 失效；placeholder 需四重兼容写法；outline: none 后必须提供 :focus 反馈；type="search" 清空按钮需用 appearance: none 重置。
直接给结论：不能只靠改 type 或加 class 就变样，必须用 CSS 重写视觉层，且关键属性漏一个就容易在真机或不同浏览器里崩。
box-sizing: border-box 必须加，否则 width 会失效
不加这句，padding 和 border 会额外撑宽输入框。比如你写了 width: 300px，但加了 padding: 12px 和 border: 2px 后，实际宽度变成 328px——尤其在 Flex 或 Grid 布局里，立刻换行或溢出容器。
- 所有文本类输入框都该统一加：
input[type="text"], input[type="email"], input[type="search"], input[type="password"] { box-sizing: border-box; } - IE8+ 原生支持，不用前缀，也别漏分号
- 移动端 Safari 对
box-sizing解析严格，漏掉会导致表单错位
::placeholder 兼容写法必须写全，不然部分浏览器不显示
Chrome/Safari 用 ::-webkit-input-placeholder，Firefox 用 ::-moz-placeholder，旧版 IE 用 :-ms-input-placeholder。只写标准 ::placeholder，Firefox 和 IE 会完全忽略。
- Firefox 的
::-moz-placeholder在聚焦时仍生效，而 Chrome 的::-webkit-input-placeholder一聚焦就消失——如果你设了浅灰 placeholder 色，用户刚点进去文字就“闪没”，体验极差 - 推荐写法（顺序不重要，但四条都得有）：
input::placeholder、input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder - 别用
opacity控制 placeholder 透明度，某些安卓 WebView 会直接不渲染
outline: none 后必须配 :focus 样式，否则可访问性挂掉
删掉默认蓝色外框本身没问题，但没补上焦点反馈，键盘用户按 Tab 键根本不知道光标在哪，WCAG 2.1 直接不通过。
立即学习“前端免费学习笔记（深入）”；
- 别只改
border-color，建议叠加box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2)，视觉更清晰 - 移动端 Safari 对
:focus触发有延迟，加touch-action: manipulation能缓解 - 如果用了
appearance: none（比如处理type="search"清空按钮），要额外测试 focus 状态是否还能触发
type="search" 的 × 按钮必须手动重置
Safari 和 Chrome 默认在 type="search" 右侧加清空按钮，但它的 padding、border-radius、甚至图标都是浏览器私有的，不处理就会和你的设计风格打架。
- 清除按钮核心样式：
input[type="search"]::-webkit-search-cancel-button { appearance: none; } - 旧版 Safari 还可能塞个搜索图标，顺手加上：
input[type="search"]::-webkit-search-decoration { appearance: none; } - 注意：重置后按钮彻底消失，如需自定义 × 图标，得用伪元素或额外 DOM 元素实现，纯 CSS 搞不定
最常被跳过的其实是真机测试——PC 上一切正常，放到 iOS 或安卓微信内置浏览器里，placeholder 颜色错乱、:focus 不触发、type="search" 右侧按钮又冒出来，这些都不是 CSS 写错了，而是浏览器私有行为没压住。
