Bootstrap 4自定义is-warning表单状态不生效问题排查求助

嘿，我之前也踩过Bootstrap表单状态样式的坑，结合你的情况（is-valid/is-invalid正常、CSS已确认加载），大概率是样式优先级冲突或者缺少对应状态的补充样式，咱们一步步来排查解决：

1. 先排查样式被覆盖的优先级问题 #

打开Firefox调试工具，选中你的输入框元素，切换到「样式」面板：

• 找到你写的.form-control.is-warning相关样式，看看是不是被划掉了（划掉意味着被更高优先级的样式覆盖）
• 查看覆盖它的样式是什么选择器（比如可能是.form-control:focus、原生表单状态样式，或者你自己写的其他自定义样式）

如果是优先级问题，你可以提升is-warning的选择器特异性，比如：

// 比单纯的.form-control.is-warning优先级更高
.form-group .form-control.is-warning {
  border-color: $warning;
}

2. 补充focus状态的样式 #

Bootstrap原生的is-valid和is-invalid都包含了聚焦时的样式，如果你只写了普通状态的is-warning，当输入框被聚焦时，默认的focus边框会直接覆盖警告色边框。你需要补上focus状态的样式，和原生状态逻辑保持一致：

.form-control.is-warning {
  border-color: $warning;
  // 补上聚焦时的边框与阴影样式
  &:focus {
    border-color: $warning;
    box-shadow: 0 0 0 0.2rem rgba($warning, 0.25);
  }
}

3. 确认变量与HTML结构是否正确 #

• 检查你使用的$warning变量是不是Bootstrap原生变量，或者自定义变量有没有正确赋值（可以看编译后的CSS里border-color值是不是你预期的警告色）
• 确保is-warning类是直接添加在.form-control元素上（比如<input class="form-control is-warning">），而不是父级的.form-group容器上

4. 强制刷新清除浏览器缓存 #

有时候浏览器会缓存旧的CSS文件，哪怕你已经修改了代码，加载的还是旧版本。可以试试强制刷新页面（Ctrl+F5）或者手动清除浏览器缓存后再测试。

按照上面的步骤排查，应该就能解决is-warning状态不生效的问题啦！

内容的提问来源于stack exchange，提问作者KarimS