reset.css 重置表单元素导致原生样式丢失，应在其后用 all: revert 恢复 UA 样式；若不支持则降级为 appearance: auto 等；border-bottom 失效因 reset 高权重要求显式设置子属性或提高选择器特异性。
不是 reset 写错了，而是它把表单控件的浏览器默认样式（UA styles）一并清掉了——input、select、button 等元素本该有的边框、内边距、下拉箭头、焦点轮廓、拖拽手柄全没了，后续样式又没及时补上，结果就是“全变平了”“点不动”“看不见焦点”。
reset.css 为什么连表单也重置了
多数 reset.css（尤其是老式全量版）会用高特异性选择器直接命中表单元素，例如：
input, select, textarea, button { margin: 0; padding: 0; border: 0; font: inherit; }
这行代码本身没错，但后果是：border: 0 覆盖了原生边框，padding: 0 让文字贴边，font: inherit 可能导致字号错乱，而最关键的 appearance: none（或被隐式重置）直接干掉了 Chrome 的下拉箭头、Safari 的日期图标、Firefox 的滚动条样式。
- Chrome 下
select变成无边框无箭头矩形 -
input[type="file"]按钮文字消失，只剩“未选择文件”灰字 -
textarea右下角拖拽手柄消失，用户无法手动拉伸 -
button失去默认cursor: pointer和点击反馈
all: revert 是最直接的解法
在 reset.css 加载之后，对目标表单元素单独加一条 all: revert，就能让它们退回到浏览器 UA 样式表的原始定义，真正唤回原生 UI：
立即学习“前端免费学习笔记（深入）”；
input, select, textarea, button { all: revert; }
注意三点：
- 必须写在 reset.css 之后，否则会被覆盖（Vite/Webpack 中建议放在自定义 CSS 文件末尾）
- 不能写在
form或body上——all: revert会把子元素的font-family、color全退回 UA 值，页面就“褪色”了 - IE 和 Safari 15.3 及更早版本不支持，需降级处理：
appearance: auto; background: unset; border: unset;
为什么 border-bottom 写不上
你写了 .border--style { border-bottom: 1px solid #ccc; } 却没生效？大概率是因为 reset.css 用了 input[type="text" i] 这类内部伪类选择器（Chrome/Edge 自动注入），其权重远高于普通类名。此时 border: 0 作为复合属性，已把 border-bottom 彻底覆盖。
- ✅ 正确做法：显式重置所有边框子属性：
border-top: none; border-right: none; border-bottom: 1px solid #ccc; border-left: none; - ✅ 同时提升选择器特异性：
input.border--style, input[type="text"].border--style - ❌ 避免
!important——它会污染后续:focus状态的outline覆盖逻辑
normalize.css 比 reset.css 更适合表单场景
如果你发现 reset 后要拼命补 padding、line-height、outline，说明 reset 太激进。normalize.css 不清零，只修正差异：保留 input 的默认内边距、select 的箭头、button 的可点击区域，同时统一 box-sizing 和 vertical-align。
- 引入方式只需替换
<link>：把reset.css换成normalize.css - 它不破坏可访问性——
:focus轮廓、复选框选中态、键盘导航都原生可用 - 和 Bootstrap/Ant Design 等框架共存更稳，冲突概率低一个数量级
真正麻烦的从来不是写多少 CSS，而是哪条规则在什么时候、以什么权重生效。表单样式异常，90% 出在加载顺序和选择器特异性上，而不是逻辑错误。
