Bootstrap 5.2如何修改必填字段未填写时提示图标底色？

第一步：修正表单HTML结构 #

首先需要调整你的表单代码，添加Bootstrap表单验证所需的类和反馈元素，否则自定义样式无法生效：

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<style>
/* 自定义样式写在这里 */
</style>
</head>
<body>
<form class="needs-validation" novalidate>
  <div class="container">
    <h3>test form</h3>
    <div class="mb-3">
      <label for="name" class="form-label">Enter Name</label>
      <input type="text" class="form-control" id="name" name="name" required>
      <div class="invalid-feedback">
        请输入姓名
      </div>
    </div>
    <button class="btn btn-primary" type="submit">submit</button>
  </div>
</form>
<script>
// 启用Bootstrap表单验证
(function () {
  'use strict'
  const forms = document.querySelectorAll('.needs-validation')
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }
      form.classList.add('was-validated')
    }, false)
  })
})()
</script>
</body>
</html>

第二步：单独修改图标周围颜色 #

Bootstrap的验证提示图标由两个伪元素实现：::before是图标外围的圆圈边框，::after是内部的提示图标。你可以通过以下CSS精准修改目标颜色：

/* 修改图标外围圆圈的颜色（即你所说的"倒置i图标周围的颜色"） */
.was-validated .form-control:invalid ~ .invalid-feedback::before {
  border-color: #ff6b6b; /* 替换成你想要的边框颜色 */
}

/* 可选：修改图标内部的背景色和文字颜色 */
.was-validated .form-control:invalid ~ .invalid-feedback::after {
  background-color: #ff6b6b; /* 替换成你想要的内部填充色 */
  color: #ffffff; /* 图标文字颜色 */
}

关键说明 #

• 使用.was-validated .form-control:invalid ~ .invalid-feedback作为选择器，是为了保证样式优先级高于Bootstrap默认样式，确保修改生效
• 如果是针对合法字段的提示图标，只需把:invalid替换为:valid，invalid-feedback替换为valid-feedback即可

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