必须为 input 添加 box-sizing: border-box; 以防止 padding/border 撑宽；placeholder 需兼容各浏览器伪元素写法；outline: none 必须配合 :focus 样式保障可访问性；type="search" 清空按钮需用 appearance: none 重置；真机测试不可替代。
直接用 CSS 控制 input 元素样式，不是靠 JS 或框架“封装”，也不是改 type 属性就能变外观——type 只影响语义和行为，样式必须靠 CSS。
为什么 box-sizing: border-box 必须加
不加的话，padding 和 border 会额外撑宽输入框，导致实际宽度超出你写的 width: 300px。尤其在响应式布局里，多个 input 并排时容易换行或溢出容器。
- 所有
input[type="text"]、input[type="search"]、input[type="email"]都该统一加 - 写法：
box-sizing: border-box;，别漏分号 - IE8+ 支持，无需前缀
::placeholder 样式在不同浏览器要分开写
Chrome/Safari 用 ::-webkit-input-placeholder，Firefox 用 ::-moz-placeholder，现代标准是 ::placeholder。只写一个会导致部分浏览器失效。
- 推荐写全：
input::placeholder { color: #999; }
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
注意：Firefox 的 ::-moz-placeholder 在聚焦状态下仍生效，而 Chrome 的 ::-webkit-input-placeholder 在聚焦时自动隐藏——这点差异常被忽略，导致 placeholder 颜色在输入中途突然变浅或消失。
立即学习“前端免费学习笔记（深入）”；
outline: none 后必须配 :focus 样式
直接删掉 outline 不仅破坏键盘导航体验（Tab 切换时看不见焦点在哪），还违反 WCAG 可访问性要求。浏览器默认的蓝色外框虽然丑，但有功能意义。
- 删 outline 的同时，一定要用
:focus显式定义替代样式，比如加边框色、阴影或背景微调 - 别只改
border-color，建议叠加box-shadow提升视觉反馈强度 - 移动端 Safari 对
:focus触发较慢，可加touch-action: manipulation优化响应
type="search" 的清空按钮要主动处理
Safari 和 Chrome 会在 type="search" 输入框右侧加 × 按钮，但它的默认样式（尤其是圆角、内边距）会干扰你的设计一致性。不处理的话，同一套 CSS 在 type="text" 和 type="search" 上表现完全不同。
- 清除按钮样式需重置：
input[type="search"]::-webkit-search-cancel-button { appearance: none; } - 旧版 Safari 还可能加搜索图标，用
input[type="search"]::-webkit-search-decoration { display: none; } - 如果想保留清空功能但换图标，得用自定义按钮 + JS 监听，不能只靠伪元素
真正难搞的是跨浏览器 placeholder 渲染节奏、focus 状态的触发时机，以及 search 类型在 iOS 上的 spinner 行为——这些细节不跑真机测，光看桌面 Chrome 是发现不了的。
