input[type=”text”]比.form-input更易维护，因其按控件类型分层处理，避免checkbox拉宽、number箭头残留等问题；属性选择器需注意大小写敏感、引号规范及hidden类型排除。
为什么 input[type="text"] 比 .form-input 更难维护
直接用类名控制样式看似简单，但表单控件类型多（text、email、number、checkbox、radio）、语义不同、默认行为差异大，硬套同一个类容易导致 checkbox 被拉宽、number 出现多余箭头、search 圆角异常等问题。属性选择器能按真实类型分层处理，避免“一刀切”。
input[type] 选择器的常见误写和兼容性陷阱
IE8+ 支持标准写法，但要注意大小写敏感（type="Email" 不会匹配 input[type="email"]），且部分旧版 safari 对 [type="range"] 的伪元素支持不完整。实际使用时优先小写，并避开对 range、color 等复杂控件做过度样式覆盖。
-
input[type=button]缺少引号 → 在某些构建工具中会报 css 解析错误，必须写成input[type="button"] -
input[type=search]在 webkit 中自带appearance: searchfield，重置圆角需加-webkit-appearance: none -
input[type="checkbox"], input[type="radio"]无法用width/height直接缩放，得靠transform: scale()或替换为自定义伪元素
一套可用的类型化重置组合（含关键修复）
不是所有 input 都该长得一样，而是让同类控件表现一致、可预测。下面这段 CSS 重点解决默认样式污染问题，同时保留语义区分：
input { margin: 0; font: inherit; line-height: normal; /* 统一移除各浏览器默认 appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"] { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="checkbox"], input[type="radio"] { / 保持原生尺寸，仅微调对齐 / vertical-align: middle; margin: 0 4px 0 0; }
当需要统一视觉风格又不能丢语义时，怎么折中
纯属性选择器适合基础重置，但若设计稿要求所有输入框带阴影、统一焦点色、甚至禁用状态灰度一致，就得叠加类名。推荐做法：用属性选择器做「底层归一」，再用类名做「上层主题」。
立即学习“前端免费学习笔记（深入）”；
- html 里仍保留
，不删type - CSS 写成
input.form-control[type="text"]和input.form-control[type="email"]分别微调，而非只靠.form-control - javaScript 校验时仍用
el.type === "email"判断逻辑，样式层和行为层不耦合
最常被忽略的是 type="hidden" —— 它不该出现在表单样式重置范围内，漏掉会导致隐藏域意外获得边框或内边距。检查时记得排除它。