统一表单控件样式需重置 appearance、显式定义边框背景内边距，自绘 select 箭头，用 CSS 变量暴露主题色等可覆盖属性，配合 :focus-visible 与键盘测试保障可访问性。
怎么让表单控件样式不随浏览器或系统变样
原生 <input>、<select>、<textarea> 在不同浏览器（尤其是 Safari 和 Windows Edge）里默认渲染差异大，比如 border-radius 在某些版本的 Safari 中对 <select> 无效，appearance 不设好就会漏掉系统控件残留。
- 统一重置所有表单元素的
appearance：加appearance: none+-webkit-appearance: none+-moz-appearance: none - 必须显式设置
border、background、padding，不能依赖浏览器默认值 -
<select>的下拉箭头要自己用伪元素画，::after配合background-image或 SVG base64 更稳 - 禁用
user-select: none在<input type="text">上——会干扰光标定位和输入法
封装成 CSS 类时，哪些属性必须外放为变量
硬编码颜色、尺寸、阴影会导致组件无法适配主题或响应式断点。真正需要抽离的是那些「可能被业务层覆盖」的视觉层参数，不是结构逻辑。
- 用
CSS custom properties暴露：--form-control-bg、--form-control-border-color、--form-control-focus-shadow - 不要把
display、flex布局、position等结构属性设为变量——它们属于组件内部契约，改了容易崩布局 - 如果支持暗色模式，
prefers-color-scheme应在封装层处理，而不是让调用方重复写媒体查询 - 字体大小建议用
rem，但别直接写font-size: var(--fs-sm)——更稳妥是绑定到font简写里，避免被子元素font-size重置干扰
为什么用 :focus-visible 替代 :focus 更安全
:focus 一触发就高亮，键盘用户还没按 Tab 就看到焦点框，鼠标点击时也闪一下，体验割裂。而 :focus-visible 只在真正需要可见焦点时才生效，比如键盘导航。
- 必须搭配
outline: none在:focus下，否则:focus-visible不会接管 - 旧版 Safari 不支持，需用
focus-visiblepolyfill 或降级为:focus:not(:focus-visible)隐藏非必要焦点 - 不要在
<button>上只靠:focus-visible做交互反馈——它不覆盖鼠标 hover 场景，hover 还得单独写 - 测试时用键盘 Tab 切换，别只靠鼠标点——很多问题只在键盘流中暴露
表单控件封装后，如何避免 class 名冲突和样式泄漏
全局类名如 .input、.select 极易被项目其他 CSS 覆盖，尤其当团队多人协作或接入第三方 UI 库时。
立即学习“前端免费学习笔记（深入）”；
- 命名强制带前缀，例如
.ui-input、.ui-input__label，BEM 是底线，不是可选项 - 用
all: unset重置继承样式，比逐个写color: inherit、font: inherit更彻底 - 如果用 Shadow DOM 封装（如 Web Components），
:host内部仍要重置margin和vertical-align，否则 inline 元素会和其他文字基线错位 - 禁止在封装类里写
* { box-sizing: border-box }——会污染宿主环境，应该由项目根 CSS 统一控制
最麻烦的从来不是写样式，而是让封装后的控件在表单验证、无障碍读屏、键盘操作、缩放 200% 时都不出岔子。这些地方没显式测试过，光看页面长得一样，上线后准出问题。
