直接写 input 或 select 样式会失效，因浏览器对原生表单控件渲染逻辑差异大：chrome 支持部分伪元素，firefox 屏蔽，ios safari 对 border-radius 和 appearance 处理不一致；需显式重置 -webkit-appearance 和 appearance，并针对 input[type="number"] 隐藏箭头，移动端 select 下拉箭头只能用 background-image 覆盖。
为什么直接写 input 或 select 样式会失效
因为浏览器对原生表单控件的渲染逻辑差异极大：Chrome 允许部分伪元素（如 ::-webkit-inner-spin-button）干预 input[type="number"]，Firefox 完全屏蔽这些伪类；iOS Safari 对 border-radius 和 appearance 的处理又不一致。你写的 border: 1px solid #ccc 可能被 -webkit-appearance: none 覆盖，也可能被系统主题强制重置。
实操建议：
- 所有表单控件必须显式重置
-webkit-appearance和appearance，且顺序不能颠倒：-webkit-appearance: none; appearance: none; -
input[type="number"]必须额外加::-webkit-inner-spin-button { -webkit-appearance: none; }才能隐藏上下箭头 - 移动端
select在 iOS 上无法真正“自定义下拉箭头”，只能用background-image覆盖，且需配合padding-right预留图标空间
@mixin form-control-base() 必须包含哪些属性
这个 Mixin 不是锦上添花，而是避免重复踩坑的底线封装。只写 border 和 padding 是不够的 —— 缺少关键属性会导致禁用态错乱、聚焦反馈丢失、甚至在暗色模式下文字不可读。
实操建议：
- 必须声明
font-family、font-size、line-height，否则继承父级字体可能引发高度塌陷或行高错位 - 必须设
color和background-color，尤其禁用态要同步cursor: not-allowed和opacity: 0.6，否则用户点击无反馈 - 聚焦态统一用
&:focus { outline: none; box-shadow: 0 0 0 2px var(--focus-ring-color, #3b82f6); }，别依赖浏览器默认outline，它在不同系统上跳变严重 - 所有尺寸相关值（
height、padding、border-radius）必须用变量驱动，例如$form-control-height: 36px，而非硬写36px
如何让 select 的下拉箭头真正可控
原生 select 的箭头在 Firefox 和 iOS 上根本无法用 CSS 伪元素替换，强行写 ::-moz-appearance 或 ::-webkit-appearance 无效。唯一可靠路径是视觉覆盖 + 语义保留。
实操建议：
- 用
background-image: url("data:image/svg+xml,...")写内联 SVG 箭头，确保在无网络/离线场景也能显示 - 设置
background-repeat: no-repeat、background-position: right 12px center、background-size: 12px，并配padding-right: 36px防止文字被遮挡 - 为兼容旧版 Edge，加
background-origin: content-box防止箭头偏移 - 不要尝试用
pointer-events: none盖一层伪元素 —— 屏幕阅读器会跳过真实select，破坏可访问性
SCSS 中处理跨浏览器滚动条和表单控件的混合输出
很多人把 ::-webkit-scrollbar 和 scrollbar-color 写在同一选择器里，结果 Firefox 直接丢弃整条规则 —— 它根本不认识 WebKit 伪类。这不是语法错误，是浏览器解析机制决定的。
实操建议：
- 用
@at-root分离输出：WebKit 规则走一套，Firefox 规则走另一套，绝不混写 - 对表单控件的滚动条定制（比如
textarea），必须确保父容器有overflow: auto且内容真实溢出，否则::-webkit-scrollbar永远不生效 - 在 Mixin 中用
@supports (scrollbar-color: auto)包裹 Firefox 规则，比靠 UA 判断更可靠 - 移动端慎用自定义滚动条：iOS Safari 完全不支持
::-webkit-scrollbar，且scrollbar-width仅限 Firefox，其他平台只能接受默认样式
select 原生下拉面板，这时候就得考虑是否值得用 JS 封装一个可访问的自定义下拉组件。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
