使用Select2 Bootstrap5主题时清除按钮与占位符重叠问题求助

我的清除按钮与占位符出现重叠情况：

当前使用Select2的Bootstrap5主题，其他功能正常，仅清除按钮存在问题。

相关代码：

JavaScript 代码 #

$('#selectMySearch').select2({
  theme: "bootstrap-5",
  width: "300px",
  placeholder: $(this).data('placeholder'),
  closeOnSelect: false,
  allowClear: true,
});

HTML 代码 #

<select class="form-select" id="selectMySearch" data-placeholder="Recherches enregistrées 🔎">
  <option></option>
  <option>Test1</option>
  <option>Test2</option>
</select>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />

<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<link rel="stylesheet" href="/public/css/main.css">

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.min.css">

<!-- Or for RTL support -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.min.css">

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1/dist/axios.min.js"></script>

<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.2/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

解决办法 #

1. 清理重复的样式引用 #

你同时加载了LTR和RTL版本的Select2 Bootstrap5主题样式，这会造成样式冲突。根据你的网站布局需求保留一个版本就行——如果不是右到左的布局，删掉RTL样式的引用：

<!-- 删掉这行 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css" />

另外要保证样式加载顺序是：Bootstrap基础样式 → Select2核心样式 → Select2 Bootstrap5主题样式，这样主题样式才能正确覆盖核心样式的默认设置。

2. 用自定义CSS调整间距 #

如果清理重复样式后还是有重叠，给Select2的输入区域加个右侧内边距，让占位符避开清除按钮：

/* 给搜索输入框加右侧内边距 */
.select2-search--inline .select2-search__field {
  padding-right: 30px !important;
}

/* 调整清除按钮的位置 */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
  right: 10px;
}

把这段代码放到你的main.css里，确保它在所有Select2和Bootstrap样式之后加载，这样才能生效。

3. 排查自定义CSS冲突 #

检查你的/public/css/main.css里有没有修改过.form-select或者Select2相关类的内边距、定位属性，这些自定义样式可能打乱了Select2的布局。可以暂时注释掉相关规则，看看是不是冲突导致的问题。

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