---
# System prepended metadata

title: Bootstrap 5 - 想要 dropdown「看起來像 select」，但實際用的是 dropdown 行為

---

# 前提 : 想要 dropdown「看起來像 select」，但實際用的是 dropdown 行為

**在 BS5 的 dropdown 裡，常看到這種寫法：** 🎭 假 select（button + dropdown）

```
<div class="dropdown">
  <button
    class="form-select"
    data-bs-toggle="dropdown">
    台北
  </button>

  <ul class="dropdown-menu w-100">
    <li><a class="dropdown-item">台北</a></li>
    <li><a class="dropdown-item">台中</a></li>
  </ul>
</div>

```

**為什麼要這樣做?**
優點:
✔️ 樣式自由
✔️ 可放 icon、HTML
缺點:
❌ 要自己處理值（JS）

---

### 一、form-select 本來是做什麼的？

`form-select` 是 給 `<select>` 用的樣式 class：

```
<select class="form-select">
  <option>選項一</option>
  <option>選項二</option>
</select>

```

它會幫你做這些事：

* 高度、padding 跟 input 一致
* 右邊有「下拉箭頭」
* focus、disabled 樣式
* 跟表單元件視覺一致

---

### 二、那為什麼會用在 `<button>` 上？

* 👉 form-select 的作用是：把元素「外觀」變成 `<select>` 下拉選單的樣子
* ⚠️ 但它 不會真的變成 `<select>`、也不會有選項功能

**在 BS5 的 dropdown 裡，常看到這種寫法：**

```

<button
  class="form-select"
  data-bs-toggle="dropdown">
  請選擇
</button>

```

#### 原因是：

**|想要 dropdown「看起來像 select」，但實際用的是 dropdown 行為**

因為 `<select>`：

* ❌ 不能放 HTML
* ❌ 很難客製化樣式
* ❌ JS 控制有限

#### 所以很多 UI 會：

**|用 button + dropdown，模仿 select**

---

### 三、form-select 在 button 上實際做了什麼？

它 只影響 CSS，大概包含：

* padding
* border
* border-radius
* 背景色
* 右側箭頭（background-image）
* focus 樣式

❌ 不會有：

* 表單送值行為
* option 選取狀態
* required / validation

---

### 四、對比：真的 `<select>` vs 假 select（dropdown）

**✅ 真 select**

```

<select class="form-select">
  <option>台北</option>
  <option>台中</option>
</select>

```

✔️ 有表單值
✔️ 原生鍵盤操作
❌ 客製困難

---

### 五、這樣用會不會「不正確」？
**技術上：✅ 可以**
**語意上：⚠️ 不理想**

官方其實有提醒：

* **|form-select 是為 `<select>` 設計的**
* **|用在其他元素只是「視覺 hack」**

---

### 六、什麼時候該用？

✔️ 想要「像 select，但功能更多」
✔️ 不需要表單原生驗證
✔️ 願意自己處理選值 JS

❌ 真的是表單欄位、要送資料 → 用 `<select>`

---

一句話總結

**|🔹 form-select = select 的外觀樣式**
**|🔹 用在 `<button>` 上只是「借皮」**
**|🔹 行為還是 dropdown，不是 select**
**|🔹 要不要用，取決於你要「外觀」還是「語意 + 表單功能」**