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