all: revert可直接恢复表单控件的ua默认样式，唤回原生下拉箭头、日历图标等；它比手动还原appearance/border更可靠，且需确保在bootstrap css后加载，ie不支持时须手动回退关键属性。
直接用 all: revert 恢复表单控件的浏览器默认样式，比手动还原 appearance、border、background 更可靠，且无需猜测 Bootstrap 具体重置了哪些属性。
为什么 input/select 突然“变丑”了
Bootstrap（尤其是 v4/v5 的 reboot.css）会全局重置表单元素：抹掉 Chrome 的下拉箭头、Safari 的圆角阴影、原生 date picker 图标，甚至清空 padding 和 font。这不是 bug，是它主动“标准化”的结果——但代价是你看不到原生 UI 了。
常见现象包括：select 变成无边框矩形、input[type="file"] 按钮文字消失、textarea 失去右下角拖拽手柄。
- 别急着删
reboot.css—— 它还负责box-sizing、margin等基础行为，全删可能引发布局错乱 - 也别只靠
!important补appearance: auto—— Bootstrap 的appearance: none常带更高权重，且 IE 不支持appearance - 打开 DevTools 的 Computed 面板，直接看
appearance、background、border这几项被谁覆盖，比猜更准
all: revert 怎么用才有效
all: revert 不是“重置为初始值”，而是退回到浏览器 UA 样式表的原始定义——它能真正唤回原生箭头、日历图标、拖拽手柄，且兼容性已覆盖 Chrome 93+、Firefox 96+、Safari 15.4+、Edge 97+。
- 只对具体元素生效，比如：
input, select, textarea, button { all: revert; } - 不能写在
body或form上——那样会把所有子元素都“退回原生”，连font-family都丢了 - 如果项目还需保留部分 Bootstrap 表单样式（如
.form-control的 padding），就用更窄的选择器：.my-native-input { all: revert; }，再额外加 class 控制 - Vite/Webpack 中若用 CSS in JS 或
style标签动态注入，确保这条规则在 Bootstrap CSS 之后加载，否则会被覆盖
遇到 IE 或旧浏览器怎么办
all: revert 在 IE 和 Safari
- 重点补这三项：
appearance: auto（恢复箭头/图标）、background: unset（释放原生背景色和渐变）、border: unset（还原默认边框粗细和圆角） - 对
input[type="date"]、input[type="range"]这类特殊控件，单独加伪元素重置：input[type="date"]::-webkit-calendar-picker-indicator { appearance: auto; } - 别碰
box-sizing—— Bootstrap 的border-box是合理设定，强行改回content-box可能导致宽度计算错误 - 用
@supports not (all: revert)包一层降级规则，现代浏览器走revert，老浏览器走手动还原
真正麻烦的不是怎么“修”，而是哪些地方该修——all: revert 一加就全恢复，但很可能把 Bootstrap 给你调好的字体大小、行高也一起退回去。得先明确：你到底要原生交互（箭头、拖拽），还是要原生视觉（粗边框、小字号）？后者往往不如微调 Bootstrap 的变量来得干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
