CODEWITHSUNDEEP
bootstrap-5
Adrian
Adrian

Reputation: 907

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

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?

Upvotes: 0

Views: 965

Answers (1)

Rok Benko
Rok Benko

Reputation: 23078

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 1

Related Questions