如何修改Bootstrap 5搜索框默认关闭按钮的外观？

先明确两个关键场景 #

你提到的「关闭按钮图标」分两种情况，对应不同的处理方式：

1. Bootstrap 自带的 .btn-close 组件（如模态框、弹窗的关闭按钮） #

疑问1解答：不是图片，是CSS生成的字符

Bootstrap的关闭图标并非图片，而是通过CSS伪元素 ::before 生成的Unicode字符 \00d7（也就是×），相关样式定义在 .btn-close 类中。

替换方法：

• 直接替换为自定义图标（比如你引入的Font Awesome）：

  <!-- 用Font Awesome叉号替换原生关闭图标 -->
  <button class="btn-close" type="button">
    <i class="fa-solid fa-xmark" style="display: block; color: #6c757d;"></i>
  </button>
  

• 或者隐藏原生伪元素内容，用CSS指定自定义图标：

  .btn-close::before {
    content: "\f00d"; /* Font Awesome叉号的Unicode值 */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #dc3545;
  }
  

疑问2解答：完全可以用CSS修改外观

通过Bootstrap提供的CSS变量或直接覆盖样式调整：

.btn-close {
  --bs-btn-close-color: #dc3545; /* 修改图标颜色 */
  --bs-btn-close-size: 1.5em; /* 修改图标大小 */
  opacity: 1; /* 去掉默认半透明 */
}

2. 搜索输入框（type="search"）的原生清除按钮 #

你提供的代码里的搜索框，默认显示的清除按钮是浏览器原生控件，不是Bootstrap生成的，不同浏览器样式差异很大。

疑问1解答：不是Bootstrap提供的，需自定义替换

原生清除按钮无法直接替换图标，建议先隐藏原生按钮，再添加自定义的清除按钮：

/* 隐藏各浏览器的原生清除按钮 */
input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
input[type="search"]::-moz-search-cancel-button {
  display: none;
}

修改HTML结构，添加自定义清除按钮：

<div class="input-group">
  <input class="form-control search-box" type="search" placeholder="Search articles..." aria-label="">
  <!-- 自定义清除按钮 -->
  <button class="btn btn-outline-secondary" type="button" id="clear-search-input">
    <i class="fa-solid fa-xmark"></i>
  </button>
  <button class="btn btn-success" type="submit">
    <i class="fa-solid fa-magnifying-glass"></i> Search
  </button>
</div>

添加JS实现清除功能：

document.getElementById('clear-search-input').addEventListener('click', function() {
  document.querySelector('.search-box').value = '';
});

疑问2解答：原生按钮CSS修改兼容性差，自定义按钮可随意调整

原生清除按钮的CSS样式在不同浏览器里属性不同（比如WebKit是::-webkit-search-cancel-button，Firefox是::-moz-search-cancel-button），修改起来麻烦且兼容性差。而自定义按钮可以通过CSS完全控制样式：

#clear-search-input {
  border-radius: 0;
  border-left: none;
  color: #6c757d;
}
#clear-search-input:hover {
  color: #dc3545;
  background-color: #f8f9fa;
}

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