如何在Bootstrap项目中用CSS统一表单错误提示样式？-css教程-PHP中文网

要使 .invalid-feedback 正常显示并生效，必须同时满足：dom 结构紧邻、类名 is-invalid 正确添加、表单启用 novalidate 且触发 was-validated；仅改 css 颜色无效。

如何在bootstrap项目中用css统一表单错误提示样式？

直接改 .invalid-feedback 颜色无效，不是 CSS 写错，而是样式根本没被激活——缺了 DOM 结构、类名控制和表单验证开关三样东西。

为什么 `.invalid-feedback` 改了颜色还是灰的、不显示？

常见现象：写了 .invalid-feedback { color: #d32f2f; }，但文字仍是半透明灰色，甚至完全不出现。原因有三个：

.invalid-feedback 默认 display: none，只在它前一个兄弟元素是 .form-control.is-invalid 时，才靠 .form-control.is-invalid ~ .invalid-feedback 规则显示
Bootstrap 自带 opacity: 0.6，单纯改 color 会被压暗，看着像没生效
原生规则选择器权重高（比如 [class*="is-invalid"]），单用 .invalid-feedback 压不住

必须同步覆盖的两个 CSS 选择器

只改一个等于白改。你要同时写这两段，并确保它们在 Bootstrap CSS 之后加载：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.form-control.is-invalid {
  border-color: #d32f2f;
}
.form-control.is-invalid ~ .invalid-feedback {
  color: #d32f2f;
  opacity: 1;
  font-weight: 500;
}

注意：~ 是通用兄弟选择器，要求 <input class="form-control is-invalid"> 和 <div class="invalid-feedback"> 在 DOM 中紧邻，中间不能插空格、注释或其它标签。如果用了 <code>form-floating，结构也得保持这种相邻关系（input → label → div.invalid-feedback）。

`novalidate`、`is-invalid` 和 `was-validated` 缺一不可

样式不会自动触发，必须手动配齐三要素：

<form></form> 标签必须带 novalidate 属性，否则浏览器原生弹窗会抢在 .invalid-feedback 之前出现
校验失败后，必须显式执行 input.classList.add('is-invalid')；只调 setCustomValidity('msg') 不会改 DOM 类
若用 was-validated 模式，提交时得先 form.checkValidity()，再 form.classList.add('was-validated')
每次校验前，先清旧状态：input.classList.remove('is-valid', 'is-invalid')，否则残留类会导致样式错乱