用css变量统一控制表单边框颜色：定义--input-border-color为基底，配合:focus、:invalid、:user-invalid、:disabled等伪类动态赋值，确保跨浏览器一致性与设计系统对齐。
input和textarea怎么用CSS变量统一控制边框颜色
原生表单元素的默认样式在不同浏览器里差异大，input、textarea、select 的 border 和 outline 行为尤其不一致。直接写死颜色值会导致状态切换（比如:focus、:invalid）时维护成本高。
用 CSS 变量把颜色抽出来，配合 :focus、:disabled、:invalid 等伪类动态赋值，是最轻量又可控的方式。
-
--input-border-color作为基底变量，所有状态都基于它计算 -
:focus时改用--input-border-color-focus，避免直接覆盖border-color导致其他状态失效 -
textarea要额外加resize: vertical，不然用户拉伸后容易撑破容器 - Chrome 对
input[type="number"]的上下箭头会继承color，如果设了深色文字但没同步调箭头颜色，看起来像“消失”了
input, textarea {
border: 1px solid var(--input-border-color, #d1d5db);
--input-border-color-focus: #3b82f6;
}
input:focus, textarea:focus {
border-color: var(--input-border-color-focus);
outline: none;
}
:invalid和:required状态怎么用CSS变量联动提示色
表单验证失败时，光靠 :invalid 改边框不够直观；用户可能没注意到错误，或者误以为是样式 bug。把错误色也纳入变量体系，就能和设计系统对齐。
注意：Chrome 和 Safari 对 :invalid 的触发时机不同——Chrome 在输入时实时校验，Safari 默认要提交后才生效。所以得配合 :user-invalid（支持度还行，Edge 105+、Chrome 109+、Safari 16.4+）补全体验。
- 定义
--input-border-color-error，并在:invalid和:user-invalid中统一使用 -
:required:invalid可以叠加更醒目的样式，比如加box-shadow，但别只依赖阴影——色盲用户可能看不到 - 不要只改边框色，同步改
color和background-color（轻微），否则文字在白色背景上还是看不清
input:invalid, input:user-invalid {
border-color: var(--input-border-color-error, #ef4444);
color: var(--input-text-color-error, #1f2937);
}
为什么不能直接在:disabled里用opacity控制灰度
很多人习惯给 :disabled 加 opacity: 0.6，看起来省事，但实际埋了两个坑：一是屏幕阅读器可能跳过半透明内容，二是点击穿透（尤其是叠在其他可点元素上时）。
更稳妥的做法是用变量控制颜色和指针状态，保持语义清晰。
- 禁用态应该用
--input-bg-disabled和--input-border-color-disabled，而不是靠 opacity 模糊处理 - 必须加
cursor: not-allowed，否则用户会误点 -
input[disabled]的value仍会被提交（除非加name属性但不设值），所以视觉灰度只是辅助，逻辑上还得靠后端校验
input:disabled {
background-color: var(--input-bg-disabled, #f9fafb);
border-color: var(--input-border-color-disabled, #e5e7eb);
cursor: not-allowed;
}
自定义checkbox和radio时CSS变量怎么复用
原生 input[type="checkbox"] 和 input[type="radio"] 样式不可控，但强行用 appearance: none 后，状态色、尺寸、焦点环这些就得自己补全。这时候共用表单变量能减少重复定义。
关键不是“怎么画勾”，而是“怎么让它的激活色、禁用色、焦点色和输入框保持一致”。否则整个表单看起来像拼凑的。
- 用
--input-border-color控制未选中时的边框，--input-border-color-focus控制:focus，--input-border-color-active控制:checked - 不要用
background-image画勾，优先用mask+background-color，这样能自动响应变量色值变化 - Firefox 对
:focus-visible支持较晚（110+），旧版本会 fallback 到:focus，所以变量名别起太长，避免覆盖混乱
input[type="checkbox"]:checked {
background-color: var(--input-border-color-active, #3b82f6);
border-color: var(--input-border-color-active);
}
变量本身不解决交互逻辑，但一旦漏掉某个状态的变量引用（比如忘了给 :user-invalid 设色），用户在 Safari 提交失败时就只能看到默认红框——而那个红不是你设计系统里的红。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
