如何仅对Bootstrap表单的无效字段应用自定义验证样式？

要实现仅在字段无效时显示红色样式，有效时保持默认灰色且无绿色对勾，只需要覆盖Bootstrap默认的表单验证样式即可，具体操作如下：

• 重置有效状态的默认样式
  Bootstrap默认会给验证通过的输入框添加绿色边框和对勾图标，我们需要把这些样式重置回普通输入框的状态：

  /* 重置有效输入框样式，恢复默认灰色边框 */
  .was-validated .form-control:valid,
  .form-control.is-valid {
    border-color: #dee2e6; /* 匹配.form-control默认边框颜色 */
    box-shadow: none; /* 移除绿色焦点阴影 */
    background-image: none; /* 移除绿色对勾图标 */
  }
  

• 保留无效状态的样式（可选）
  如果Bootstrap默认的无效样式（红色边框、红色阴影、错误图标）符合你的需求，这一步可以省略。要是需要自定义，也可以重新定义无效状态的样式：

  /* 自定义无效输入框样式（与Bootstrap默认一致，可按需调整） */
  .was-validated .form-control:invalid,
  .form-control.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  }
  

完整示例代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #dee2e6;
  box-shadow: none;
  background-image: none;
}
</style>
<div class="container">
  <form class="needs-validation was-validated" novalidate>
    <label for="sample" class="form-label">Number</label>
    <input type="number" class="form-control" id="sample" min="1" step="1" required />
  </form>
</div>

修改后，输入框在无效时会显示红色边框和错误图标，有效时则保持默认的灰色边框，不会出现绿色对勾和绿色边框。

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