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

選択メニュー（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.form-label の for 属性の値と、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] を追加

 

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定
scss/_variables.scss 内 form-select-variables の設定$form-select-padding-y:             $input-padding-y;
$form-select-padding-x:             $input-padding-x;
$form-select-font-family:           $input-font-family;
$form-select-font-size:             $input-font-size;
$form-select-indicator-padding:     $form-select-padding-x * 3; // 背景画像の追加のパディング
$form-select-font-weight:           $input-font-weight;
$form-select-line-height:           $input-line-height;
$form-select-color:                 $input-color;
$form-select-disabled-color:        $gray-600;
$form-select-bg:                    $input-bg;
$form-select-disabled-bg:           $gray-200;
$form-select-disabled-border-color: $input-disabled-border-color;
$form-select-bg-position:           right $form-select-padding-x center;
$form-select-bg-size:               16px 12px; // 画像のサイズがピクセル単位のため
$form-select-indicator-color:       $gray-800;
$form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");

$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding;
$form-select-feedback-icon-position:    center right $form-select-indicator-padding;
$form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half;

$form-select-border-width:        $input-border-width;
$form-select-border-color:        $input-border-color;
$form-select-border-radius:       $input-border-radius;
$form-select-box-shadow:          $box-shadow-inset;

$form-select-focus-border-color:  $input-focus-border-color;
$form-select-focus-width:         $input-focus-width;
$form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focus-color;

$form-select-padding-y-sm:        $input-padding-y-sm;
$form-select-padding-x-sm:        $input-padding-x-sm;
$form-select-font-size-sm:        $input-font-size-sm;

$form-select-padding-y-lg:        $input-padding-y-lg;
$form-select-padding-x-lg:        $input-padding-x-lg;
$form-select-font-size-lg:        $input-font-size-lg;

$form-select-transition:          $input-transition;