※従来の選択メニュー(
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]
を追加