Select styling

Bootstrap 5 Select styling component

Responsive Select styling built with Bootstrap 5. Simple example of how to style MDB select element.

Basic example

In this example we see differences between MDB select and standard select from bootstrap. If you want to add different styles to the Select element use data-mdb-attributes=" ".

In Select Docs, you can find available attributes.

Default select

MDB select

MDB select for dark backgrounds

If you want to adjust input colors for dark backgrounds via add data-mdb-form-white="true" next to .select.

Edit in sandbox 
        
            
      <!-- Bootstrap select -->
       <select class="form-select" aria-label="Default select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
      </select>

      <!-- MDB select -->
      <select data-mdb-select-init>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
      </select>

      <!-- MDB select for dark backgrounds-->
      <select data-mdb-select-init data-mdb-form-white="true">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
      </select>