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