<select class="custom-select">
<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="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
/* _custom-forms.scss:164 */
.custom-select {
display: inline-block;
width: 100%;
height: $custom-select-height;
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
line-height: $custom-select-line-height;
color: $custom-select-color;
vertical-align: middle;
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
background-size: $custom-select-bg-size;
border: $custom-select-border-width solid $custom-select-border-color;
@if $enable-rounded {
border-radius: $custom-select-border-radius;
} @else {
border-radius: 0;
}
@include box-shadow($custom-select-box-shadow);
appearance: none;
&:focus {
border-color: $custom-select-focus-border-color;
outline: 0;
@if $enable-shadows {
box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
} @else {
box-shadow: $custom-select-focus-box-shadow;
}
&::-ms-value {
// For visual consistency with other platforms/browsers,
// suppress the default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge.
// See https://github.com/twbs/bootstrap/issues/19398.
color: $input-color;
background-color: $input-bg;
}
}
&[multiple],
&[size]:not([size="1"]) {
height: auto;
padding-right: $custom-select-padding-x;
background-image: none;
}
&:disabled {
color: $custom-select-disabled-color;
background-color: $custom-select-disabled-bg;
}
// Hides the default caret in IE11
&::-ms-expand {
opacity: 0;
}
}
/* _custom-forms.scss:431 */
.custom-select {
@include transition($custom-forms-transition);
}
/* _forms.scss:305 */
.custom-select {
width: auto;
}
/* _forms.scss:54 */
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {
border-color: $color;
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
}
Browse ready-made Bootstrap components that use this class.
Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.
© 2026 Shuffle. All rights reserved.
See what you're getting before you commit.
Switch the editor to Grid and every page of your project appears side by side on one canvas. Arrange them freely, zoom in and out, and add as many new pages as you need in a few clicks.
Describe what you need in one chat and the Agent does the rest: it adds new sections, edits copy and styles, moves blocks around or removes them across your whole page. No modes, no switching, just tell it what to change.
Not quite there yet? Ask for tweaks like missing assets, your logo or other details, and regenerate the design without starting from scratch.