Bootstrap 5 選擇菜單

選擇菜單

選擇菜單（選擇一項）：

多選菜單（按住 ctrl 或 shift（或用鼠標拖動）可選擇多個）：

如果您希望允許用戶從多個選項中進行選擇，請使用選擇菜單。

如需在 Bootstrap 5 中設置選擇菜單的樣式，請將 .form-select 類添加到 <select> 元素：

實例

<select class="form-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

親自試一試

選擇菜單的大小

請使用 .form-select-lg 或 .form-select-sm 類來改變選擇菜單的大小：

實例

<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">

親自試一試

禁用選擇菜單

請使用 disabled 屬性禁用選擇菜單：

實例

<select class="form-select" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

親自試一試

數據列表

Bootstrap 還可設置數據列表的樣式，它是 <input> 元素的預定義選項列表：

請從列表中選擇您的瀏覽器：

實例

<label for="browser" class="form-label">請從列表中選擇您的瀏覽器：</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

親自試一試