Select2 选择下拉菜单：清除与文本重叠的图标

Question

我遇到一个问题，文本在选择菜单中悬停的 X“清除”按钮下重叠。在右侧添加填充并不是解决方案，因为它将图标推到框外。我正在使用此处找到的 Select2 JS 库 https://select2.org/ 和 Bootstrap 5

$("#search_bar").select2({
  theme: 'bootstrap-5',
  placeholder: "Some text",
  allowClear: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="">
  <select id="search_bar" class="form-select w-25">
    <option value="1">
      This is a long option string
    </option>
    <option value="2">
      This is another long option string
    </option>
  </select>
</div>

Answer 1

在下面添加 CSS。

雷雷

https://jsfiddle.net/8n23bd6q/

Answer 2

按照此处的文档操作 Select2 文档。您可以使用 width: 'style' 和标签 <select> 中的内联样式来扩展 select2 宽度。这里我将select的宽度设置为200px

然后，通过查看 select2 的 DOM 结构（使用 Chrome Devtool），我发现我们可以通过添加以下 CSS 来使 X 按钮不与文本重叠：

.select2-selection.select2-selection--single {
  padding-right: 50px !important;
}

$("#search_bar").select2({
  theme: 'bootstrap-5',
  placeholder: "Some text",
  allowClear: true,
  width: 'style'
});

.select2-selection.select2-selection--single {
  padding-right: 50px !important;
}

sssccc
sssccc

[email protected]/dist/select2-bootstrap-5-theme.min.css" />

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">



  
    
      This is a long option string
    
    
      This is another long option string