とほほのカスタマイザブルセレクト入門

• トップ
• カスタマイザブルセレクト

• カスタマイザブルセレクトとは
• 追加された仕様
• 使用例
  • 基本的な使用例(select, ::picker(select), base-select)
  • 選択肢に画像を表示する
  • 選択されたコンテンツをカスタマイズする(<selectedcontent>)
  • 選択された選択肢(:checked)
  • ピッカーアイコン(::picker-icon)
  • チェックマーク(::checkmark)
  • 選択肢にフレックスボックスを適用する
  • 選択肢に詳細説明を追加する
  • セレクトボックスにトランジションを適用する
• リンク

カスタマイザブルセレクトとは

• フォーム部品の <select> の見栄えや機能をカスタマイズする技術です。
• 選択肢に画像やアニメーションやフレックスボックスなどを適用することができます。
• 2025年3月の Chrome 134 でサポートされました。
• 詳細は下記のサイトで説明されています。
  • https://open-ui.org/components/customizableselect/
• 元々セレクトボックスなどのフォーム部品(ウィジェット)は OS が提供するネイティブな部品で表示されていました。
• これに対し、OSが異なるブラウザでも同じ見栄え(ベーススタイル)を提供し、かつ、カスタマイズ可能な機能を提供するものです。
• これまで <select>～</select> の間には <option>, <optgroup>, 加えて <hr> を記述できていましたが、加えて <div>, <span>, <img>, <svg> の記述が可能となりました。
• <select multiple> や <select size=> にはまだ対応していません。

追加された仕様

下記の要素、値、疑似要素が追加されました。

• <selectedcontent> : セレクトボックスに表示されるコンテンツ
• appearance: base-select : ベーススタイルを指定
• select::picker(select) : ポップアップする選択肢リスト
• option:checked : 選択された選択肢
• select::picker-icon : セレクトボックス右側のピッカーアイコン(▼)
• option::checkmark : 選択された選択肢左側のチェックマーク(✔)

使用例

基本的な使用例(select, ::picker(select), base-select)

select要素、およびその選択肢である ::picker(select) 疑似要素の appearance プロパティに base-select を指定することで、セレクト部品の外観をOS依存のネイティブスタイルではなく、OSに依存しないCSS標準のベーススタイルにすることができます。

.base-select, .base-select::picker(select) {
  appearance: base-select;
}

<select>
  <option>ネイティブスタイルな選択肢#1</option>
  <option>ネイティブスタイルな選択肢#2</option>
  <option>ネイティブスタイルな選択肢#3</option>
</select>
<select class="base-select">
  <option>ベーススタイルな選択肢#1</option>
  <option>ベーススタイルな選択肢#2</option>
  <option>ベーススタイルな選択肢#3</option>
</select>

選択肢に画像を表示する

選択肢に画像を表示することができます。

.my-image-option {
  option {
    margin: 4px 0;
    img {
      width: 32px;
      border: 1px solid #ccc;
    }
  }
}

<select class="base-select my-image-option">
  <option><img src="../free/flag-japan.svg" alt=""> 日本</option>
  <option><img src="../free/flag-usa.svg" alt=""> 米国</option>
  <option><img src="../free/flag-germany.svg" alt=""> ドイツ</option>
</select>

選択されたコンテンツをカスタマイズする(<selectedcontent>)

<button> と <selectedcontent> を記述すると選択されたコンテンツをカスタマイズすることができます。

.my-selected-content {
  selectedcontent {
    font-weight: bold;
  }
}

<select class="base-select my-selected-content">
  <button>
    選択：<selectedcontent></selectedcontent>
  </button>
  <option>選択肢#1</option>
  <option>選択肢#2</option>
  <option>選択肢#3</option>
</select>

選択された選択肢(:checked)

:checked で選択された選択肢のスタイルを指定することができます。

.my-checked {
  option:checked {
    font-weight: bold;
    background-color: pink;
    color: red;
  }
}

<select class="base-select my-checked">
  <option>選択肢#1</option>
  <option>選択肢#2</option>
  <option>選択肢#3</option>
</select>

ピッカーアイコン(::picker-icon)

セレクトボックスの右端に表示されるピッカーアイコン(▼)は ::picker-icon 疑似要素に対して display: none で非表示にしたり、content: で他のコンテンツに置き換えたり、スタイルを指定することができます。

.my-picker-icon {
  &::picker-icon {
    content: "⇩";
    color: red;
  }
}

<select class="base-select my-picker-icon">
  <option>選択肢#1</option>
  <option>選択肢#2</option>
  <option>選択肢#3</option>
</select>

チェックマーク(::checkmark)

選択された選択肢の左に表示されるチェックマーク(✔)は ::checkmark 疑似要素に対して display: none で非表示にしたり、content: で他のコンテンツに置き換えたり、スタイルを指定することができます。

.my-checkmark {
  option::checkmark {
    /* display: none; */
    content: "●";
    color: red;
  }
}

<select class="base-select my-checkmark">
  <option>選択肢#1</option>
  <option>選択肢#2</option>
  <option>選択肢#3</option>
</select>

選択肢にフレックスボックスを適用する

選択肢にフレックスボックスを適用することもできます。

.my-flex {
  display: flex;
  flex-flow: column wrap;
  height: 50px;
  border: 1px solid #ccc;
}

<select class="base-select">
  <div class="my-flex">
    <option>選択肢#1</option>
    <option>選択肢#2</option>
    <option>選択肢#3</option>
    <option>選択肢#4</option>
  </div>
</select>

選択肢に詳細説明を追加する

選択肢に詳細説明を追加し、選択時に display: none で非表示にすることで、選択肢に詳細説明を追記することができます。未対応ブラウザで表示すると詳細説明も表示されてしまうので注意してください。

.my-description {
  width: 10rem;
  selectedcontent {
    .description {
      display: none;
    }
  }
  option {
    .option-item {
      padding-bottom: 10px;
      .title {
        font-weight: bold;
      }
      .description {
        font-size: 80%;
        color: #666;
      }
    }
  }
}

<select class="base-select my-description">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option>
    <div class="option-item">
      <div class="title">選択肢#1</div>
      <div class="description">選択肢#1は...</div>
    </div>
  </option>
  <option>
    <div class="option-item">
      <div class="title">選択肢#2</div>
      <div class="description">選択肢#2は...</div>
    </div>
  </option>
  <option>
    <div class="option-item">
      <div class="title">選択肢#3</div>
      <div class="description">選択肢#3は...</div>
    </div>
  </option>
</select>

セレクトボックスにトランジションを適用する

セレクトボックスに選択肢を表示する際にトランジションをかけることができます。

.my-transition {
  selectedcontent > div {
    transition: transform .2s ease;
    @starting-style {
      transform: translateY(10px);
    }
  }
}

<select class="base-select my-transition">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option><div>選択肢#1</div></option>
  <option><div>選択肢#2</div></option>
  <option><div>選択肢#3</div></option>
</select>

リンク

• https://open-ui.org/components/customizableselect/
• https://developer.chrome.com/blog/rfc-customizable-select?hl=ja
• https://chromestatus.com/feature/5737365999976448

---