※従来の選択メニュー（
select.form-control）をv4のカスタム選択メニュー（select.custom-control）に統廃合し、新たな選択メニュー（select.form-select）に一本化した。
標準の設定（Default）v5.0.0-alpha1クラス名変更
カスタム <select> メニューはカスタムクラスのみを必要とし、.form-select がカスタムスタイルに切り替える。カスタムスタイルは <select> の最初の外観に制限されており、ブラウザの制限により <option> を変更することは不可。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="mb-3">
<label for="exampleFormSelect1" class="form-label">選択の例</label>
<select class="form-select" id="exampleFormSelect1">
<option selected>この選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>
</div>※Bootstrap4.xの設定例 赤背景が変更箇所
従来の選択メニュー<div class="form-group">
<label for="exampleFormSelect1">選択の例</label>
<select class="form-control" id="exampleFormSelect1">
<option selected>この選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>
</div>
カスタム選択メニュー<div class="form-group">
<label for="exampleFormSelect1">選択の例</label>
<select class="custom-select" id="exampleFormSelect1">
<option selected>この選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>
</div>
【設定】
div.mb-*> [<label.form-label《ラベル》 +select.form-select《選択メニュー》]label[for="ID"]+select.form-select#IDでラベルと選択メニューを関連付ける
【アクセシビリティの設定】
- 選択メニューを単独で使用する場合は、ラベルテキストの代替として
select.form-selectにaria-label属性（要素に対してラベル付けを行う）を入れる
【変更履歴】
- 【v5.0.0-alpha1】
select.form-controlかselect.custom-select⇒select.form-select<label>に.form-labelを入れる
複数選択メニュー
multiple 属性もサポート：
見本
設定例
<select class="form-select" multiple aria-label="複数選択メニューの例">
<option selected>この選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>表示範囲のサイズ
size 属性も同様にサポート：
見本
設定例
<select class="form-select" size="3" aria-label="サイズ3の選択メニューの例">
<option selected>この選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>
選択メニューのサイズ（Sizing）v5.0.0-alpha1クラス名変更
同様のサイズのテキスト入力とマッチするように、大きめと小さめの選択メニューも選択可能。
サイズの種類
●大きめの選択メニュー
●小さめの選択メニュー
※標準（参考）
Bootstrap5.xの設定例 緑背景が変更箇所
大きめの選択メニュー<select class="form-select form-select-lg" aria-label="大きめの選択メニューの例">
<option selected>大きめの選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>
小さめの選択メニュー<select class="form-select form-select-sm" aria-label="小さめの選択メニューの例">
<option selected>小さめの選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>
※Bootstrap4.xの設定例 赤背景が変更箇所
従来の大きめの選択メニュー<select class="form-control form-control-lg" aria-label="大きめの選択メニューの例">
<option selected>大きめの選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>
従来の小さめの選択メニュー<select class="form-control form-control-sm" aria-label="小さめの選択メニューの例">
<option selected>小さめの選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>
大きめのカスタム選択メニュー<select class="custom-select custom-select-lg" aria-label="大きめの選択メニューの例">
<option selected>大きめの選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>
小さめのカスタム選択メニュー<select class="custom-select custom-select-sm" aria-label="小さめの選択メニューの例">
<option selected>小さめの選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>
【設定】
select.form-selectに.form-select-{size}（上記の「サイズの種類」から選択）を追加
【変更履歴】
- 【v5.0.0-alpha1】
select.form-control.form-control-{size}（またはselect.custom-select.custom-select-{size}）⇒select.form-select.form-select-{size}
無効化（Disabled）v5.0.0-alpha3設定追加
選択メニューに disabled ブール属性を追加してグレー表示にし、ポインターイベントを削除。
設定例
<select class="form-select" aria-label="選択メニューを無効化した例" disabled>
<option selected>この選択メニューを開く</option>
<option value="1">その1</option>
<option value="2">その2</option>
<option value="3">その3</option>
</select>【設定】
- 無効化したい選択メニュー（
select.form-select）に[disabled]を追加