引入CSS后表单元素变丑的主因是第三方CSS全局重置抹除了原生样式；用all: revert可恢复UA默认样式，IE不支持时需手动还原appearance、border等关键属性。
为什么引入 CSS 后 input、select 等表单元素突然变丑了
根本原因是第三方 CSS（比如 Normalize.css、Bootstrap、或某些 UI 库的 base 样式）里写了全局重置规则，例如 input, select, textarea, button { margin: 0; padding: 0; border: none; font: inherit; }。这些规则本意是消除浏览器默认差异，但会直接抹掉表单控件自带的原生样式（如 Chrome 下 select 的下拉箭头、input[type="date"] 的日历图标、Safari 中的圆角和阴影），导致视觉“被清空”。
用 all: revert 恢复单个表单元素的浏览器默认样式
all: revert 是目前最直接的解法：它会让元素忽略所有继承和层叠样式，退回到浏览器 UA 样式表的原始定义。注意它不等于 unset 或 initial，后者不会恢复 UA 特定行为。
实操建议：
- 只对明确需要保留原生外观的表单控件使用，比如
<input type="date">、<select>、<input type="file"> - 写在具体选择器后，避免影响其他样式，例如：
input[type="date"], input[type="time"], select, input[type="file"] { all: revert; } - IE 完全不支持
all: revert，如需兼容 IE，得回退到手动重设关键属性（见下一条）
兼容 IE 的手动还原方案：只重置必要属性
当项目必须支持 IE 或老版本 Edge 时，all: revert 失效，只能逐项还原 UA 默认值。重点不是“全部还原”，而是挑出被重置后影响功能或可访问性的属性：
立即学习“前端免费学习笔记（深入）”；
-
appearance: auto—— 恢复select下拉箭头、checkbox方框等控件形态（Firefox/Chrome 支持，IE 不支持但不影响显示） -
border: 1px solid #ccc（或border: 1px inset）—— 原生input在多数浏览器中默认有边框 -
padding: 2px 3px—— 防止文字贴边，各浏览器略有差异，取中间值即可 -
background-color: white—— 避免透明背景导致文字不可读 - 对
input[type="range"]、input[type="color"]等特殊类型，单独加appearance: auto+ 小范围尺寸微调更稳妥
别用通配符重置整个表单区域
有人会想：“我给 form 或 .form-group 加 all: unset，再单独美化内部元素”，这反而更危险：
-
all: unset会清除display、margin、font-size等布局和文本属性，导致结构塌陷或文字缩成一团 - 它不区分“该保留的 UA 样式”和“该清除的自定义样式”，容易引发连锁错乱
- 如果父容器用了 Flex/Grid，
all: unset可能干掉display: flex，子元素立刻失效 - 真正可控的做法是：从最小粒度入手 —— 只针对具体表单控件标签或类型做样式还原，其余交由组件级 class 控制
最常被忽略的是 appearance 属性的渐进增强写法：加 -webkit-appearance 和 -moz-appearance 前缀虽已非必需，但在某些旧版 Safari 上仍能防止 select 变成无边框纯文本块。细节不起眼，但一上线就暴露。
