选择下拉列表中与文本重叠的Select2清除图标
选择下拉列表中与文本重叠的Select2清除图标
提问于 2022-10-12 03:45:24
我有一个问题，在选择菜单中的悬停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/select2-bootstrap-5-theme@1.2.0/dist/select2-bootstrap-5-theme.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-10-12 04:10:30
遵循这里的文档，Select2文档。您可以使用标记select2中的width: 'style'和内联样式扩展<select>宽度。这里，我将select的宽度设置为200px
然后，通过查看select2的DOM结构(使用Chrome )，我们可以通过添加这个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;
}<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/select2-bootstrap-5-theme@1.2.0/dist/select2-bootstrap-5-theme.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="">
<select id="search_bar" class="form-select w-25" style="width: 200px">
<option value="1">
This is a long option string
</option>
<option value="2">
This is another long option string
</option>
</select>
</div>
Stack Overflow用户
发布于 2022-10-12 04:00:51
添加以下css。
.select2-selection__clear {
position: absolute !important;
right: 2px !important;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74036278
复制相关文章
相似问题
腾讯云开发者
