Je rencontre un problème où le texte se chevauche sous le bouton X "Effacer" lors du survol dans le menu de sélection. L'ajout d'un remplissage à droite n'est pas une solution car cela pousse l'icône hors de la boîte. J'utilise la bibliothèque Select2 JS trouvée ici https://select2.org/ et 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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ajoutez le CSS suivant.
.select2-selection__clear { position: absolute !important; right: 2px !important; }https://jsfiddle.net/8n23bd6q/
Suivez la documentation ici Select2 Documentation. Vous pouvez utiliser
width: 'style'和标签<select>中的内联样式来扩展 select2 宽度。这里我将select的宽度设置为200pxEnsuite, en regardant la structure DOM de select2 (à l'aide de Chrome Devtool), j'ai découvert que nous pouvons faire en sorte que le bouton X ne chevauche pas le texte en ajoutant le CSS suivant :
.select2-selection.select2-selection--single { padding-right: 50px !important; }