.is-valid 的 border-color 不生效，是因为 bootstrap 5 依赖 .was-validated 表单开关或 :valid 伪类触发样式，.is-valid 仅在与 .form-control 同元素且父表单含 .was-validated 时才生效；手动控制需同步覆盖 .form-control.is-valid 及其 focus 状态，并注意深色模式与封装组件兼容性。
直接改 .is-valid 的 border-color 不生效，是因为 Bootstrap 5 默认不靠该类触发绿色边框——它用的是 :valid 伪类 + .was-validated 或 .needs-validation 表单级开关，.is-valid 只是手动控制的备用方案。
为什么 .is-valid 设置了但边框还是灰色
常见错误现象：给 <input> 加了 class="form-control is-valid"，但边框没变绿。根本原因是：.is-valid 类本身不带任何样式，它只在和 .form-control 同时存在、且父表单有 .was-validated 时，才被 .was-validated .form-control.is-valid 规则捕获。如果你没加 .was-validated，或用了 :valid 自动验证模式，这个类就完全被忽略。
-
.was-validated必须加在<form></form>标签上，不是 input 上 -
.is-valid和.form-control必须同时出现在同一个元素上，缺一不可 - 若用了
novalidate属性，浏览器不会触发:valid，此时只能靠 JS 手动增删.is-valid
修改 :valid 状态下的绿色边框色（推荐）
这是最可靠的方式，覆盖所有自动验证场景（比如 required、type="email"）。Bootstrap 5 的 input:valid.form-control 默认边框色来自 #28a745，但你不能只改 border-color，必须同步处理聚焦态和阴影，否则用户点进去又变回原色。
- 必须同时覆盖
input:valid.form-control和input:valid.form-control:focus - 要加
!important，因为原生规则带:valid伪类，权重更高 - 聚焦时的
box-shadow也得重写，否则光晕颜色还是默认绿色
input:valid.form-control,
select:valid.form-control,
textarea:valid.form-control {
border-color: #2e7d32 !important;
}
input:valid.form-control:focus,
select:valid.form-control:focus,
textarea:valid.form-control:focus {
border-color: #1b5e20 !important;
box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25) !important;
}
手动控制 .is-valid 时怎么改颜色
当你用 JS 做异步校验（比如用户名是否可用），就得主动加 .is-valid 类。这时样式由 .form-control.is-valid 触发，但它的默认规则权重比 :valid 低，且依赖 .was-validated 存在。
- 确保表单有
class="was-validated"，否则.form-control.is-valid不生效 - 必须同时覆盖
.form-control.is-valid和.form-control.is-valid:focus -
.invalid-feedback和.valid-feedback要紧邻 input，否则提示不显示
.form-control.is-valid {
border-color: #2e7d32 !important;
}
.form-control.is-valid:focus {
border-color: #1b5e20 !important;
box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25) !important;
}
别漏掉深色模式和组件封装问题
在深色背景上，rgba(46, 125, 50, 0.25) 的光晕容易发灰；而像 <b-form-input></b-form-input>（BootstrapVue）或 <form.control></form.control>（React-Bootstrap）这类封装组件，常把原生 input 包在内部，导致你的 .form-control.is-valid 规则无法命中。
- 深色模式下建议用
@media (prefers-color-scheme: dark)单独重写光晕值，比如rgba(104, 159, 56, 0.3) - Vue/React 中优先查 DevTools 的 computed styles，确认
box-shadow是否被划掉；若被划掉，尝试提升选择器权重，例如.my-form .form-control.is-valid:focus - 不要删掉
box-shadow的第一个两个0（水平/垂直偏移），否则光晕会偏移，失去“居中发光”效果
