应封装 form-control mixin 统一控制 input/textarea/select 的边框（1px solid #d1d5db）、圆角、焦点态（box-shadow: 0 0 0 3px rgba(59,130,246,0.1)），textarea 加 resize: vertical，select 用 appearance: none + 伪元素补箭头；禁用态单独处理，用 opacity: 0.6 + pointer-events: none；placeholder 需全前缀覆盖并适配深色模式；number 类型需安全隐藏箭头且保留可访问性。
怎么用 @mixin 统一控制 input、textarea、select 的边框/圆角/焦点态
直接封装一个 form-control mixin，把共性样式抽出来，避免每个元素重复写 border、border-radius、outline。Sass 里用 @mixin + @include 最自然，也方便后续加主题变量。
常见错误是只给 input 写样式，漏掉 textarea 和 select，结果它们在表单里看起来割裂；或者用 :focus 时没重置 outline，导致双轮廓（浏览器默认 outline + 自定义 border）。
- 统一用
border: 1px solid #d1d5db，别用border: none后再靠 box-shadow 模拟边框——语义不清，可访问性差 -
textarea要额外加resize: vertical，不然用户拉伸时 UI 错位 -
select的箭头在 Safari 和 Firefox 渲染不一致，先加appearance: none，再用伪元素补箭头更可控 - 焦点态统一用
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)，比纯改 border 更柔和，也避开了outline的键盘导航干扰
为什么不能直接 @include form-control 在 :disabled 上
因为 :disabled 是伪类，不是选择器主体，Sass 里如果写 &:disabled { @include form-control }，会把整个 mixin 的 CSS 规则嵌套进去，生成一堆无效样式（比如 input:disabled input { ... }）。
正确做法是把禁用态的样式单独抽成 form-control-disabled mixin，或在主 mixin 里用参数控制状态分支。
- 禁用时优先用
opacity: 0.6+cursor: not-allowed，别只改文字颜色——视觉反馈太弱 - 禁用的
select在 Chrome 里仍可能响应点击，得加pointer-events: none - 如果用了 CSS 变量控制颜色，禁用态要显式覆盖
--control-border-color，否则变量值没变，禁用效果就失效
如何让 placeholder 文字颜色适配深色模式
Placeholder 不继承父级 color，也不能用 currentColor 直接绑定，必须单独设。配合 @media (prefers-color-scheme: dark) 时，容易漏掉各浏览器私有前缀。
- 必须同时写
::placeholder、::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder - 深色模式下别用纯白
#fff，选rgba(255, 255, 255, 0.5)更柔和，避免刺眼 - 如果用 Sass map 存颜色变量，placeholder 色值建议独立字段，比如
$form-placeholder-light/$form-placeholder-dark，别和文本主色混用
input[type="number"] 的上下箭头怎么安全隐藏
直接 appearance: none 在 Firefox 里无效，Chrome 需要额外处理 ::-webkit-inner-spin-button，而且隐藏后必须保证键盘操作（↑↓键）依然可用——这是可访问性硬要求。
- 只对
input[type="number"]生效，别用全局input::-webkit-inner-spin-button，否则影响其他类型 - 隐藏后加
padding-right: 1rem，留出空间防止数字被裁切 - 不要用
display: none或visibility: hidden，会导致屏幕阅读器无法识别控件类型 - 如果业务允许，优先考虑用
input[type="text"]+ 输入限制（pattern、inputmode="numeric"），比折腾 number 类型更稳
真正麻烦的是跨浏览器一致性：Firefox 的 placeholder 透明度渲染、Safari 对 appearance 的支持粒度、IE 已死但有些内网系统还在跑——这些细节不测到真机，光看文档永远漏一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
