Boostrap dropmenu hovering only changing half the width of the option background when hovered...

I'm working on a project on angular 18 with bootstrap 5.3 and I'm currently struggling with hovering in menu here is an example: On firefox

Here is the code for concerned part:

<h5>Starter Equipment Id</h5>
<select formControlName="StarterEquipmentId" class="form-select ">
<option *ngFor="let starterEquipement of starterEquipementIdOptions" [value]="starterEquipement.value"> {{starterEquipement.label}}</option>
</select>


But on Edge it doesn't encounter such issue

However the bootstrap doc state this: "Custom menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the ’s initial appearance and cannot modify the s due to browser limitations." So I guess I'm ducked but I wanted to know if there is a known work around through bootstrap, and if not what kind of add-on can I use to not make that project a 30min download with npm when I'll take this project from somewhere else?

Continue reading...