CSS引入后表单样式被覆盖怎么处理

引入第三方CSS后表单元素突然“变丑”，根本原因在于全局重置规则（如Normalize.css或Bootstrap）抹除了浏览器原生样式，导致select下拉箭头、date输入框图标、圆角阴影等关键视觉特征消失；现代解法是使用`all: revert`精准恢复UA默认样式，而兼容IE时则需手动还原`appearance`、`border`、`padding`和`background-color`等核心属性，同时务必避免对整个表单区域滥用`all: unset`——真正可靠的做法是从最小粒度出发，仅针对具体表单控件类型进行渐进式样式还原，兼顾可访问性、功能完整与跨浏览器一致性。

为什么引入 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"],
  input[type="time"],
  select,
  input[type="file"] {
    all: revert;
  }

• IE 完全不支持 all: revert，如需兼容 IE，得回退到手动重设关键属性（见下一条）

兼容 IE 的手动还原方案：只重置必要属性