image
Timotheus Bendan
Sales Manager
Profile Inbox Settings Logout
Select
  • Shopping Cart
    ...
    Digital clock
    1 x $1.190,90
    ...
    Toy Car
    1 x $139.58
    ...
    Sunglasses
    2 x $50,90
    ...
    Cake
    1 x $10,50
    Sub Total:$1.442,78

Customize the native <select>s with custom CSS that changes the element’s initial appearance.

Default

Custom <select>menus need only a custom class,.form-selectto trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations. 

<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></select>

Sizing

Set heights using classes like .form-control-lgand .form-control-sm. 

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"><option selected>Open this select menu</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select><select class="form-select form-select-sm" aria-label=".form-select-sm example"><option selected>Open this select menu</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>

The multipleattribute is also supported: 

<select class="form-select" multiple aria-label="multiple select example"><option selected>Open this select menu</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>

As is the sizeattribute: 

<select class="form-select" size="3" aria-label="size 3 select example"><option selected>Open this select menu</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>

Disabled

Add the disabledboolean attribute on a select to give it a grayed out appearance and remove pointer events. 

<select class="form-select" aria-label="Disabled select example" disabled><option selected>Open this select menu</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>
On this page