メインコンテンツへスキップ

選択メニュー(Select) v5.0.0-alpha1設定変更

カスタムの初期外観を使用して、ブラウザのデフォルトの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-selectaria-label 属性(要素に対してラベル付けを行う)を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • select.form-controlselect.custom-selectselect.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] を追加