应使用 input[type="text"] 精准匹配文本输入框，但易误选 password/search 等类型或动态插入的非目标元素；推荐结合语义化类名（如 input.username）并辅以 matches() 运行时校验。
直接用 input[type="xxx"] 就能精准选中并样式隔离，但必须配合重置默认行为和限定作用域，否则容易被浏览器差异或第三方组件反杀。
为什么 input[type="text"] 会误伤其他 input？
现代框架（如 React、Vue）常动态生成 input 元素，有些 UI 库会 clone 原始 input 并改写 type 属性，也可能把 type="text" 当默认 fallback；单独写 input[type="text"] 会匹配所有未显式设 type 的 input，包括你没预料到的搜索框、隐藏字段甚至富文本编辑器内部的 input。
更实际的问题是：type="password" 和 type="text" 渲染几乎一致，但用户对密码框的交互预期更高（比如要加 visibility toggle），光靠 type 区分样式远远不够。
- 优先搭配 class 使用，例如
input[type="search"].header-search - 避免全局写
input[type="text"] { ... }，改用语义化组合如.form-control input[type="email"] - 对敏感类型（
password、file）额外加 class 控制 JS 行为，别只依赖 type
怎么处理 number、search、range 这类“难搞”的 type？
这些类型在 Chrome、Safari、Firefox 中默认渲染差异极大：Chrome 给 number 加上下箭头，Safari 把 search 的清除按钮塞进内边距，range 滑块在各浏览器里根本不像同一个东西。
立即学习“前端免费学习笔记（深入）”；
不重置 appearance 和关键盒模型，自定义样式基本等于白干。
- 统一加
box-sizing: border-box和appearance: none（注意加-webkit-和-moz-前缀） - 清除
search的 × 按钮：input[type="search"]::-webkit-search-cancel-button { display: none; } - 隐藏
number箭头：input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; } - 对
range，必须分别处理 track / thumb 伪元素，且 Firefox 需用::-moz-range-track单独写
button 和 input[type="button|submit|reset"] 样式怎么不打架？
button 元素默认 type="submit"，但很多项目混用 <button></button> 和 <input type="button">，如果只写 button { ... } 或只写 input[type="button"] { ... }，必然漏样式。
更麻烦的是，某些旧版 IE 会把 button 的 type 属性当字符串处理，导致 [type="button"] 不生效。
- 统一用属性选择器覆盖两类：
button[type="button"], input[type="button"] { background: #2196F3; } - 提交按钮强调操作意图：
button[type="submit"], input[type="submit"] { background: #4CAF50; } - 重置按钮降低视觉权重：
button[type="reset"], input[type="reset"] { background: #FF9800; opacity: 0.85; } - 务必加
cursor: pointer，否则部分浏览器下button默认无手型
容易被忽略的兼容性雷区
不是所有浏览器都支持所有伪元素，也不是所有 type 都有稳定表现。比如 input[type="color"] 在 Safari 15.4 之前根本不支持 ::-webkit-color-swatch，而 input[type="date"] 在 Firefox 中至今无法用 CSS 定制下拉日历。
真正落地时，得接受「部分定制 + 合理降级」：能控住输入框本体就不错，别强求日历或颜色面板。
-
input[type="date"]只建议调字体、padding、border，别碰下拉图标——它不在 DOM 里，无法用 CSS 触达 -
input[type="file"]的原生按钮不可样式化，必须用 label + hidden input + JS 模拟点击 - IE11 不支持
input[type="email"]的伪类增强，但属性选择器本身可用 - 所有
appearance: none必须配border和background，否则在 Safari 中可能变透明
