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 重点解决默认样式污染问题，同时保留语义区分：
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
input {
margin: 0;
font: inherit;
line-height: normal;
/* 统一移除各浏览器默认 appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<p>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;
}</p><p>input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}</p><p>input[type="checkbox"],
input[type="radio"] {
/<em> 保持原生尺寸，仅微调对齐 </em>/
vertical-align: middle;
margin: 0 4px 0 0;
}</p>
当需要统一视觉风格又不能丢语义时，怎么折中
纯属性选择器适合基础重置，但若设计稿要求所有输入框带阴影、统一焦点色、甚至禁用状态灰度一致，就得叠加类名。推荐做法：用属性选择器做「底层归一」，再用类名做「上层主题」。
- HTML 里仍保留
，不删type - CSS 写成
input.form-control[type="text"]和input.form-control[type="email"]分别微调，而非只靠.form-control - JavaScript 校验时仍用
el.type === "email"判断逻辑，样式层和行为层不耦合
最常被忽略的是 type="hidden" —— 它不该出现在表单样式重置范围内，漏掉会导致隐藏域意外获得边框或内边距。检查时记得排除它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
