Bootstrap 5：无需SCSS如何覆盖表单验证默认样式及颜色

为什么你的自定义CSS没生效？ #

• 加载顺序错误：如果custom.css在Bootstrap CSS之前引入，Bootstrap的默认样式会覆盖你的自定义代码，必须把自定义CSS放在Bootstrap之后加载。
• 选择器优先级不足：你写的选择器和Bootstrap默认选择器权重相同，只有后加载或特异性更高的选择器才能生效。

无需SCSS修改验证样式的方法 #

方法1：提升选择器优先级（推荐） #

给表单容器添加一个自定义类（比如custom-validation-form），通过更具体的选择器覆盖Bootstrap样式：

<form class="custom-validation-form was-validated">
  <div class="mb-3">
    <label for="emailInput" class="form-label">邮箱</label>
    <input type="email" class="form-control is-valid" id="emailInput" required>
  </div>
</form>

对应的custom.css代码：

/* 特异性高于Bootstrap默认选择器，确保样式生效 */
.custom-validation-form .form-control.is-valid,
.custom-validation-form .was-validated .form-control:valid {
    border-color: #0d6efd; /* 替换为你需要的边框颜色 */
    /* 修改SVG图标颜色：把%23198754换成目标颜色的十六进制转义值（#需转成%23） */
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230d6efd' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e);
    /* 以下属性复用Bootstrap默认设置即可 */
    padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

方法2：使用!important（仅在优先级无法提升时用） #

如果不想修改HTML结构，可以用!important强制覆盖，但这种方法可能增加后续样式维护难度，谨慎使用：

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #0d6efd !important;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230d6efd' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e) !important;
}

注意事项 #

• SVG颜色转义：十六进制颜色的#必须转义为%23，否则SVG无法识别颜色值。
• 验证类：确保表单添加了was-validated类，或控件添加了is-valid类，Bootstrap的验证样式才会触发。

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