I'm struggling to make a floating label work smoothly with an HTML select that has a size="5" attribute using Bootstrap 5.3.x. It seems like it's not possible without some hacks or missing information from the Bootstrap documentation.
According to the Select docs, I should be able to expand the element a bit more, but I haven't been successful in doing so.
Here's an example of the HTML code I've written to showcase the issue:
<div class="form-floating">
<select id="example" name="example" size="5" class="form-select form-select-sm">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="example">Works with selects</label>
</div>
Here is the outcome:
https://i.sstatic.net/Z2cTX.png
I also made a Fiddle where you can see the issue I'm facing and try to play around with it.
Any ideas or guidance on how I can achieve having more options visible in the select while still using the floating label would be greatly appreciated.