如何隐藏Bootstrap表单验证中的绿色对勾标记？

解决方案：自定义CSS覆盖默认样式 #

Bootstrap的验证通过对勾是通过CSS伪元素实现的，你只需添加以下自定义CSS即可隐藏它：

/* 隐藏输入框、下拉框等表单控件的验证对勾 */
.was-validated .form-control:valid::after,
.form-control.is-valid::after,
.was-validated .form-select:valid::after,
.form-select.is-valid::after {
    content: "";
    display: none;
}

/* 隐藏复选框的验证对勾 */
.was-validated .form-check-input:valid::after,
.form-check-input.is-valid::after {
    background-image: none;
}

使用方式 #

将这段CSS添加到你的样式文件中，或放在页面的<style>标签内（需确保在Bootstrap CSS之后引入，保证样式优先级）。

修改后的完整示例 #

<style>
/* 隐藏验证通过的绿色对勾 */
.was-validated .form-control:valid::after,
.form-control.is-valid::after,
.was-validated .form-select:valid::after,
.form-select.is-valid::after {
    content: "";
    display: none;
}

.was-validated .form-check-input:valid::after,
.form-check-input.is-valid::after {
    background-image: none;
}
</style>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})()
</script>

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustomUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        Please choose a username.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationCustom03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationCustom03" required>
    <div class="invalid-feedback">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom04" class="form-label">State</label>
    <select class="form-select" id="validationCustom04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationCustom05" required>
    <div class="invalid-feedback">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

说明 #

• 这段CSS覆盖了Bootstrap默认的验证通过伪元素样式，移除了对勾的内容或背景图
• 同时兼容两种验证状态：表单添加was-validated类后的批量验证，以及单个控件添加is-valid类的单独验证
• 覆盖了输入框、下拉选择框、复选框等常见表单控件的验证对勾处理

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