直接改 .is-invalid 的 border-color 没反应，是因为该类仅在显式添加且配合 .form-control 时生效；若缺失 .form-control、加在非输入元素上，或使用 .was-validated 触发批量验证，样式均不作用。
为什么直接改 .is-invalid 的 border-color 没反应
因为 Bootstrap 5 默认用 :invalid 伪类 + .was-validated 类共同触发红色边框，而 .is-invalid 本身只是个手动状态类——它只在你显式添加时才生效，且必须配合 .form-control 才能激活边框样式。如果你没加 .form-control，或把 .is-invalid 加在了 div 上，那 border-color 就根本不会作用到输入框上。
常见错误现象：input 元素有 .is-invalid，但边框还是灰色；检查 DOM 发现 .form-control 缺失，或反馈元素被包裹在 div.form-group 里导致兄弟关系断裂。
- 确保每个验证控件同时拥有
class="form-control is-invalid" -
.invalid-feedback必须是该input的**直接后继兄弟节点**，不能嵌套在其他容器中 - 若用
.was-validated触发批量验证，.is-invalid类会被自动忽略——此时起效的是input:invalid.form-control选择器，不是你手动加的类
修改 :invalid 状态下的边框色（推荐方式）
这是最干净、覆盖所有场景的方式：不依赖 JS 切换类，也不管你用 .was-validated 还是 .needs-validation，只要浏览器判定为无效，样式就生效。关键在于提高 CSS 优先级并覆盖正确属性。
Bootstrap 5 的 input:invalid.form-control 默认边框色来自变量 $form-invalid-border-color（值为 #dc3545），但你没法直接改这个变量，除非用 Sass 编译。纯 CSS 方案得靠权重压制：
- 必须同时覆盖
border-color和:focus态，否则聚焦后又变回原色 - 要加
!important，因为 Bootstrap 原生规则带:invalid伪类，权重比普通类高 - 别只写
input:invalid，得带上.form-control，否则对select或textarea无效
示例 CSS（放在 Bootstrap 引入之后）：
input:invalid.form-control,
select:invalid.form-control,
textarea:invalid.form-control {
border-color: #e67e22 !important;
}
input:invalid.form-control:focus,
select:invalid.form-control:focus,
textarea:invalid.form-control:focus {
border-color: #d35400 !important;
box-shadow: 0 0 0 0.25rem rgba(230, 126, 34, 0.25) !important;
}
用 .is-invalid 手动控制时怎么改颜色
当你需要 JS 主动控制验证状态（比如异步校验用户名是否已存在），就得用 .is-invalid / .is-valid 类。这时颜色由 .is-invalid.form-control 规则控制，但它的默认样式和 :invalid 是两套——前者优先级略低，且不自动影响 :focus 态。
容易踩的坑：只改了 .is-invalid.form-control 的 border-color，结果用户点击输入框后边框又跳回红色；或者忘了同步改 .is-invalid.form-control:focus，导致聚焦态颜色不一致。
- 必须同时重写
.is-invalid.form-control和.is-invalid.form-control:focus - 如果用了
box-shadow，也要一并覆盖，否则聚焦发光色还是默认蓝 - 注意
.is-invalid对checkbox/radio无效——它们只能靠.form-check-input.is-invalid，且需额外处理 SVG 背景图
简短示例：
.is-invalid.form-control {
border-color: #9b59b6 !important;
}
.is-invalid.form-control:focus {
border-color: #8e44ad !important;
box-shadow: 0 0 0 0.25rem rgba(155, 89, 182, 0.25) !important;
}
iOS Safari 下 :invalid 不触发？得靠 JS 补位
iOS Safari 15.4 之前版本对 input[type="number"]:invalid 完全不响应伪类，输字母也不会变红；type="email" 在某些旧版也靠不住。这不是你 CSS 写错了，是浏览器 Bug。
解决思路不是硬扛伪类，而是退回到手动类控制：用 checkValidity() + setCustomValidity() 主动判断，再切换 .is-invalid。这样既绕过 Safari 缺陷，又能统一控制颜色逻辑。
- 监听
input或blur事件，调用input.checkValidity() - 若返回
false，先input.setCustomValidity('')清空旧错误（否则下次checkValidity()还是false） - 再根据业务规则调用
input.setCustomValidity('错误提示')，然后手动加.is-invalid - 务必在每次校验后都执行
input.classList.toggle('is-invalid', !input.checkValidity())，避免状态残留
这个环节最容易被忽略的是 setCustomValidity('') ——漏掉它，字段会永久卡在 invalid 态，哪怕用户已输入合法内容。
