Bootstrap - Select Part 5: Customizing Bootstrap Select Dropdowns with CSS & JavaScript

Customizing the Appearance with CSS

You can change the select dropdown’s background, text colour, and border styles.

Example 6: Custom Styled Select

<style>

    .custom-select {

        background-color: #f8f9fa; /* Light gray */

        border: 2px solid #007bff; /* Blue border */

        color: #007bff; /* Blue text */

        font-weight: bold;

    }

</style>

<select class="form-select custom-select">

    <option selected>Styled Option</option>

    <option value="1">Option 1</option>

    <option value="2">Option 2</option>

</select>

This changes the background, text colour, and border styling of the select dropdown.

Example 7: JavaScript Event Listener for Select Change

<script>

    document.getElementById("basicSelect").addEventListener("change", function() {

        alert("You selected: " + this.value);

    });

</script>

This script detects when the user selects an option and shows an alert with the selected value.

Useful for dynamic form interactions.