Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
Available in Other JavaScript Frameworks
CoreUI Bootstrap 6 Select is also available for Angular, React, and Vue. Explore framework-specific implementations below:
Default
A <select> takes .form-control, the same class as every other form control — it draws its own chevron because appearance: none takes the native one away. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.
<select class="form-control" 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>With form field
Wrap the control in .form-field to lay it out with its label and description, and to get validation feedback in the right place.
<div class="form-field">
<label for="selectField" class="form-label">Country</label>
<select class="form-control" id="selectField">
<option selected>Choose one…</option>
<option value="1">United States</option>
<option value="2">Canada</option>
<option value="3">United Kingdom</option>
</select>
<div class="form-text">We ship to these three for now.</div>
</div>Sizing
.form-control-sm and .form-control-lg size a select exactly as they size a text input.
<select class="form-control form-control-lg mb-4" aria-label=".form-control-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-control form-control-sm" aria-label=".form-control-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 multiple attribute is also supported:
<select class="form-control" 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 size attribute:
<select class="form-control" 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 disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.
<select class="form-control" 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>Styling the chevron
Everything else about a select — padding, colors, border, focus ring, sizes — comes from .form-control and is customized there. What belongs to the select alone is the chevron, and it answers to four custom properties you can set on the element itself:
| Property | What it does |
|---|---|
--cui-control-select-bg-img | the image. Any url() — an inline SVG, a data URI, or none to drop it |
--cui-control-select-bg-position | where it sits. Mirrored automatically in RTL |
--cui-control-select-bg-size | how big it is drawn |
--cui-control-select-padding-end | the room the text leaves for it |
A different chevron is one declaration. The color lives inside the SVG, so recoloring means swapping the image:
<select class="form-control" aria-label="Custom chevron"
style="--cui-control-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235856d6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>A wider gap, or none at all:
<select class="form-control mb-4" aria-label="Roomier chevron"
style="--cui-control-select-bg-size: 20px 15px; --cui-control-select-padding-end: 3.5rem">
<option selected>Open this select menu</option>
<option value="1">One</option>
</select>
<select class="form-control" aria-label="No chevron"
style="--cui-control-select-bg-img: none; --cui-control-select-padding-end: .75rem">
<option selected>Open this select menu</option>
<option value="1">One</option>
</select>The chevron is a background image, so its color is baked into the SVG and cannot follow a currentColor or a theme token. That is also why dark mode swaps the whole image rather than a color: the control carries --cui-control-select-bg-img and --cui-control-select-bg-img-dark side by side, and dark mode points the first at the second.
The chevron on something that is not a select
.form-control-caret draws the same chevron on an element that is not a <select> — a button opening a listbox, for instance.
<button class="form-control form-control-caret text-start" type="button">Open this menu</button>Deprecated markup
Deprecated in v6.0.0.form-select, .form-select-sm and .form-select-lg still work — they are aliases of the .form-control classes rather than a second implementation — and are removed in v7.
- <select class="form-select form-select-lg">
+ <select class="form-control form-control-lg">See the v6 migration guide for the full picture.
Customizing
CSS variables
A select takes its frame from the same --cui-control-* tokens as .form-control, declared on .form-select itself. The arrow and the space it reserves have their own:
$form-control-select-tokens: defaults(
(
--cui-control-select-bg-img: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#00000080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>"))},
--cui-control-select-bg-img-dark: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>"))},
--cui-control-select-bg-size: 16px 12px,
--cui-control-select-padding-end: calc(var(--cui-control-padding-x) * 3),
),
$form-control-select-tokens
);