:focus边框颜色不生效需查computed中border-color值：若为rgb说明变量未定义或拼写错；若仍为var()则被高优先级规则覆盖。常见干扰有硬编码border、框架样式及全局:focus重置。主题切换应改:root变量，暗色模式用@media覆盖，:focus-visible需与:focus并存。
focus边框颜色不生效？先查computed样式里border-color来源
写好input:focus { border-color: var(--focus-color); }却没变化，大概率是其他规则覆盖了变量值。打开开发者工具，选中输入框，在Computed面板里看border-color最终计算出的RGB值——如果显示的是具体颜色（比如rgb(0, 123, 255)），说明变量已被解析，问题在--focus-color本身未定义或拼写错误；如果显示var(--focus-color)但颜色不对，说明该变量被更早、更高优先级的规则重写了。
常见干扰项包括：input:focus { border: 2px solid #000; }这种硬编码写法会直接覆盖border-color；Bootstrap等框架的.form-control:focus选择器优先级远高于input:focus；还有全局重置CSS里的*:focus { outline: none; }可能连带影响边框渲染逻辑。
用:root + JS动态改--focus-color，别碰body.style.setProperty
想实现主题切换或用户偏好响应，必须把变量定义在:root作用域下，再用JS修改：
-
document.documentElement.style.setProperty('--focus-color', '#4ecdc4');✅ 正确，影响全局 -
document.body.style.setProperty('--focus-color', '#4ecdc4');❌ 错误，body下设的变量对input这类不在body子树里的元素无效（比如dialog内嵌表单）
配合暗色模式时，直接在媒体查询里覆盖变量最稳：
@media (prefers-color-scheme: dark) {
:root {
--focus-color: #4ecdc4;
}
}
注意：不要在@media里重复声明:root，否则旧版Safari可能解析失败。
:focus-visible比:focus更安全，但必须配:focus回退
:focus-visible只在键盘Tab导航时触发，鼠标点击不会亮起边框，视觉更干净，也符合可访问性直觉。但它不是:focus的替代品，而是补充：
- 必须同时写
input:focus-visible, input:focus，否则老浏览器（如Safari - 别用
outline: none粗暴清除——如果后续只靠:focus-visible加边框，鼠标用户点进去就看不见任何提示 - 显式声明
outline-style: solid，某些浏览器默认outline-style为none，导致outline-color设了也白搭
推荐最小可用组合：
input:focus {
outline: 2px solid var(--focus-color, #007bff);
}
input:focus-visible {
outline-color: var(--focus-color, #007bff);
outline-style: solid;
outline-offset: 2px;
}
textarea和input[type="number"]有隐藏坑，别漏掉
原生表单元素的默认行为差异大，统一用变量控制时容易踩坑：
-
textarea必须加resize: vertical，否则用户拉伸后内容撑破容器，且resize不继承，得单独写 -
input[type="number"]的上下箭头会继承color值，如果设了深色文字但没同步调箭头颜色，看起来像“消失”了——加一句appearance: textfield可强制还原为普通输入框样式 -
select的:focus在Safari里极难捕获，建议用:focus-within包裹父容器来间接控制
真正统一的写法不是靠一个变量打天下，而是让--input-border-color作为基底，各状态基于它派生：
input, textarea, select {
border: 1px solid var(--input-border-color, #d1d5db);
}
input:focus, textarea:focus, select:focus {
border-color: var(--input-border-color-focus, #3b82f6);
}
复杂点在于，不同浏览器对:invalid、:user-invalid的触发时机不一致，如果要用变量驱动验证态颜色，得先确保type和required属性都到位，否则变量再准也没人响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
