如何移除Bootstrap 5.2中select标签的验证右侧图标

Bootstrap 5.2里，带有required属性的<select>标签在验证不通过（比如未选择有效选项）时，右侧会显示默认的验证图标。要移除这个图标，只需通过自定义CSS覆盖Bootstrap的默认样式即可：

/* 移除验证不通过状态的图标 */
.form-select:invalid {
  background-image: none;
}

/* 如果需要同时移除验证通过状态的图标，添加下面的规则 */
.form-select:valid {
  background-image: none;
}

将这段CSS添加到你的项目中，就能去掉对应的图标。下面是整合后的完整代码示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>

<style>
.form-select:invalid {
  background-image: none;
}
</style>

<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>option1</option>
    </select>
    <div class="invalid-feedback">
      Please select a valid state.
    </div>
</div>

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