Bootstrap - add custom space between options in form-select class - bootstrap-5

Question

I'd like to add more space/padding between options in my select tag. I am able to change the height of the select tag but not the height of option tag. Below is what I've tried so far with no success:
options, .form-select, .form-control, #menu.form-select, #menu.form-control {
padding: 10px;
padding-top: 10px
line-height: 2.0;
margin: 10px;
margin-top:10px;
}
Below is the element I mentioned above.
<select id="menu" class="orm-select" data-size="5" aria-label="Quick navigation">
<option value ="select" selected style="display:none">Select</option>
<option value ="#test">test</option>
<option value ="#test2">test2</option>
</select>
My main goal is to add padding between each option. How can I do something like that?

Answer 1

This is not possible (read more about it here).
Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.
Use Bootstrap's dropdown instead.
See the snippet below.
a.custom-dropdown {
padding: 15px 40px !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<h3>Default dropdown:</h3>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<br>
<h3>Customized dropdown:</h3>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item custom-dropdown" href="#">Action</a></li>
<li><a class="dropdown-item custom-dropdown" href="#">Another action</a></li>
<li><a class="dropdown-item custom-dropdown" href="#">Something else here</a></li>
</ul>
</div>