How to Customize Bootstrap 5 Select Dropdown

Bootstrap 5 provides a default element with basic styling, but sometimes, you need to customize it for better aesthetics and user experience. In this blog post, we'll explore different ways to customize the Bootstrap 5 dropdown using CSS and JavaScript.

1. Using Default Bootstrap 5 Select

Bootstrap 5 provides a basic style for the <select> element using the .form-select class:

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

While this works, it lacks advanced styling and customization options. Let's see how we can enhance it.

2. Customizing Bootstrap 5 Select with CSS

Changing the Background and Text Color

You can override the default styles using CSS:

.custom-select {
  background-color: #f8f9fa;
  border: 2px solid #007bff;
  color: #007bff;
  border-radius: 8px;
  padding: 10px;
}

.custom-select:focus {
  border-color: #0056b3;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

Apply this class to your select element:

<select class="form-select custom-select">
  <option selected>Open this select menu</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Adding Icons inside Select

You cannot directly place an icon inside <select>, but you can use a wrapper:

<div class="position-relative">
  <select class="form-select custom-select">
    <option selected>Choose...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <i class="bi bi-chevron-down position-absolute end-0 me-3"></i>
</div>

3. Using Bootstrap Select Plugin (Better UI)

Bootstrap does not provide a custom select component by default, but you can use a plugin like Bootstrap Select to enhance its appearance and functionality.

Step 1: Include Bootstrap Select

Add Bootstrap Select CSS and JS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

Step 2: Apply Bootstrap Select

<select class="selectpicker" data-live-search="true">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Step 3: Initialize the Plugin

$(document).ready(function() {
  $('.selectpicker').selectpicker();
});

This enhances the select element by adding search functionality and better UI.

4. Creating a Custom Dropdown as a Select Alternative

If you need full customization, you can use a custom dropdown instead of a <select> element.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Select an Option
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

This gives full control over styles and behavior.

Conclusion

Bootstrap 5's default select is functional, but for better customization, you can:

• Override styles using CSS.
• Use Bootstrap Select for an enhanced experience.
• Replace <select> with a custom dropdown if needed.

Which method works best for your project? Let us know in the comments!