Select

Select

.form-select hides the native arrow of a <select> and draws a chevron as an SVG background image. Sizes are .form-select-lg and .form-select-sm; multiple and size still work.

Default, small and multiple selectsHTMLLive

<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<div class="p-3 d-flex gap-3 align-items-start">
  <select class="form-select"><option>Choose a plan</option><option>Pro</option></select>
  <select class="form-select form-select-sm"><option>Small</option></select>
  <select class="form-select" multiple size="3"><option selected>HTML</option><option>CSS</option>
    <option>JavaScript</option></select>
</div>

Browser output of Listing 3.33 — Browser output of 33

Only the closed box is styled; the open option list is still drawn by the operating system. For a fully styleable picker see Customizable <select>, or use a dropdown (Dropdown).

MENU