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>

自分で試してみる