Bootstrap 4 表单验证失败的红色边框由 .form-control.is-invalid 和 .was-validated .form-control:invalid 控制，核心样式为 border-color: #dc3545 与 box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25)，需同步覆盖两者及:focus状态才能生效。
Bootstrap 4 表单验证失败时的红色边框由哪些CSS类控制
Bootstrap 4 的表单验证失败状态（:invalid 或 .is-invalid）默认通过 .form-control.is-invalid 和 .was-validated .form-control:invalid 触发红色边框。关键样式来自 border-color: #dc3545，同时伴随 box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25)。
你不能只改 border-color 就完事——因为 box-shadow 会盖住部分视觉效果，且 :focus 状态下还会叠加另一层阴影，必须同步覆盖。
覆盖默认红色边框的最简有效写法
在自定义 CSS 中，用更高优先级选择器重写关键属性。推荐以下写法（放在 Bootstrap CSS 之后）：
.form-control.is-invalid,
.was-validated .form-control:invalid {
border-color: #e03131;
box-shadow: 0 0 0 0.2rem rgba(224, 49, 49, 0.2);
}
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
border-color: #c51d1d;
box-shadow: 0 0 0 0.2rem rgba(197, 29, 29, 0.25);
}
- 必须同时覆盖
.is-invalid和:invalid两种状态，否则动态校验（如实时输入）或手动触发表单验证时样式不一致 -
:focus版本单独写，避免聚焦时颜色突兀或阴影过重 - 不要用
!important——靠选择器权重更可控；若仍不生效，检查是否漏了.was-validated这个父级 class（它由form元素添加，用于启用浏览器原生验证样式）
input[type="file"] 和 select 的特殊处理
Bootstrap 4 对 <input type="file"> 和 <select> 的验证样式支持较弱，默认不加 .is-invalid 边框（仅文字变红）。要统一视觉，需额外声明：
立即学习“前端免费学习笔记（深入）”；
.custom-file-input.is-invalid ~ .custom-file-label,
.custom-select.is-invalid {
border-color: #e03131;
}
.custom-file-input.is-invalid:focus ~ .custom-file-label,
.custom-select.is-invalid:focus {
border-color: #c51d1d;
box-shadow: 0 0 0 0.2rem rgba(197, 29, 29, 0.25);
}
-
.custom-file-input是隐藏原生文件输入的关键，它的兄弟元素.custom-file-label才是可见控件 -
.custom-select需单独处理，因为它不走.form-control基础样式流 - 这些选择器必须放在 Bootstrap 自带 CSS 之后，且确保 HTML 结构符合 Bootstrap 4 的 class 命名约定
为什么改了 CSS 还看不到效果
常见失效原因不是代码写错，而是验证机制没真正触发：
- 表单没加
novalidate属性时，浏览器原生验证会干扰 Bootstrap 的.is-invalid类行为；建议统一用 JS 控制，移除novalidate并手动添加.is-invalid -
.form-control必须是直接子元素，如果套了.input-group或自定义 wrapper，需把.is-invalid放到最外层容器上，并用后代选择器匹配 - 某些 UI 库（如 Vue Bootstrap）会劫持 class 渲染逻辑，此时应查文档确认其验证 class 命名是否为
.is-invalid，或改用其提供的 slot/class API
真正起作用的永远是最终渲染到 DOM 上的 class 和计算后的 CSS 规则，别只盯着自己写的那几行——打开 DevTools，看元素上实际生效的 border-color 和 box-shadow 值，比猜更可靠。
