このページは Cloud Translation API によって翻訳されました。

デベロッパーフィードバックのリクエスト: カスタマイズ可能な選択

Una Kravets

<select> 要素などのフォームコントロールのスタイル設定は、長年にわたってデベロッパーの大きな課題として報告されており、Google は解決策の開発に取り組んできました。この作業は複雑で、適切に行うまでに長い時間がかかりましたが、この機能のリリースは間近に迫っています。カスタマイズ可能なバージョンの select 要素は、WHATWG で正式にステージ 2 に達しており、クロスブラウザでの関心が高く、Chrome Canary 130 からプロトタイプをテストできます。

ぜひお試しになり、フィードバックをお寄せください

Chrome Canary のインストールがバージョン 130 に更新され、試験運用版のウェブプラットフォームの機能フラグがオンになっていることを確認します。このフラグを有効にするには、アドレスバーで chrome://flags に移動し、#experimental-web-platform-features を有効にします。その後、この記事の Codepen デモが表示されます。または、この Codepen コレクションですべてまとめて確認することもできます。

この機能に関するフィードバックは、こちらのフォームからお送りください。所要時間は 3 分ほどです。

既存の HTML select タグをベースに構築された、カスタマイズ可能な select API の機能について詳しく見てみましょう。

新しい `<select>` を有効にする

新しい動作を有効にするには、ページ内選択ボタンと選択ツールの両方で CSS appearance プロパティを使用します。オプトインするには、<select> 要素と ::picker(select) に appearance: base-select を設定します。

::picker(select) は、ユーザーエージェントが提供する新しい疑似要素です。appearance: base-select を使用して新しい動作にオプトインした <select> 要素にのみ適用されます。この選択ツールの疑似要素は、ベースの選択ボタンによってトリガーされるポップオーバーです。次のコードに示すように、両方を有効にできます。

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

ページ内ボタンのみを有効にすることはできますが、ページ内ボタンを有効にせずに選択ツールのポップオーバーのみを有効にすることはできません。::picker(select) は、appearance: base-select が <select> に適用された場合にのみ作成されます。

これで、select 要素をカスタマイズする準備が整いました。新しいカスタマイズ可能な選択ツールには、ブラウザやオペレーティングシステムを問わず同じ外観のデフォルトスタイルが用意されています。macOS 版 Chrome のデフォルトのカスタマイズされた選択ツールと既存の選択ツールは次のとおりです。

基本的な選択とカスタマイズ可能な選択のデモ。

部品の分解

新しいカスタマイズ可能な選択モードに移行すると、以下の新しい要素が使用できるようになります。 - selectedoption: 現在選択されているオプションの内部 HTML を反映します。 - option::before: デフォルトのユーザー補助アフォーダンスとして現在選択されているオプションを示すチェックマークが付いています（変更される可能性があります）。- ::picker(select): カスタマイズ可能な選択内の button の外側にあるすべてのコンテンツを含むポップオーバー。

セレクトの任意の部分にスタイルを設定できます。たとえば、<option> 要素内に任意のインタラクティブでないコンテンツを追加したり、選択プルダウンを開くページ内ボタンのスタイルを設定したり、オプションのプルダウンリスト（::picker(select)）のスタイルを設定したりできます。

button（独自の矢印インジケーター）のスタイルを設定し、任意の要素の内側と外側に任意のコンテンツを追加することもできます。コンテンツの追加に加えて、これらの新しい要素とデフォルトのスタイルを非表示にすることもできます。たとえば、オプションの ::before 疑似要素にインジケーターのチェックマークを表示しない場合は、次の CSS を使用します。

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

セレクト内には要素をいくつでも配置できますが、ブラウザは <button> 要素の外側にある要素をすべて ::picker(select) 疑似要素にバケット化します。この疑似要素は、ボタンに固定されたポップオーバーとして動作します。この <button> は ::picker(select) を切り替えます。select の直下に配置されたオプションなどの要素は ::picker(select) にホイスティングされます。また、スタイル設定のために独自のラッパーを用意することもできます。このラッパーも ::picker(select) 疑似要素内に配置されます。

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

新しいカスタマイズ可能な <select> は、ポップオーバーとアンカーの配置の機能を使用します。この 2 つの基盤技術で構築されています。つまり、セレクト内のプルダウンオプションリストは、セレクトを起動するトリガーボタンに固定されたポップオーバーとして機能します。

アンカーポジショニングを使用して、この ::picker(select) ポップオーバーのスタイルを設定できます（他の要素にアンカーを付けることもできます）。このコンテンツモデルでは、トップレイヤアニメーションスタイルがオプションリストと連携して、開始効果と終了効果をアニメーション化します。

既存の `<select>` 要素を強化

以前、Chrome チームは <selectlist> 要素のアイデアに取り組んでいました。この記事では、既存の <select> 要素を再利用するよう再設計されたこの機能について説明します。

既存の <select> 要素を再利用する主なメリットの 1 つは、基本的な HTML 要素を段階的に強化できることです。<select> を再利用すると、まったく新しい要素と比較して、ページに有意なコンテンツがレンダリングされます。次の例は、カスタマイズされた選択項目と、サポートされていないブラウザのユーザーに表示される内容を示しています。

`option` 内のすべてのテキストコンテンツは、セレクト要素のフォールバックバージョンでレンダリングされます。

基本的なスタイル設定

変更は、選択要素の視覚的なスタイル設定など、簡単なものでもかまいません。たとえば、ボタンのスタイル、ホバーとフォーカスのスタイル、選択オプションの背景を更新できます。appearance: base-select でオプトインしたら、選択した部分に任意の CSS を適用します。

矢印インジケーターをカスタマイズするには、選択ツール内に独自のボタンと矢印を追加します。

<select>
  <button>
    <selectedoption></selectedoption>
    <span>
      // Arrow here
    </span>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

次に、矢印のスタイルを設定します。

/* style the arrow */
button span {
  /* arrow styles */
  transition: rotate 0.2s;
}

/* adjust arrow styles when the picker is open */
select:open button span {
  rotate: -180deg;
}

オプション内の複雑なコンテンツ

さらに、<select> 内の <option> 要素内に文字列以外のコンテンツを追加してスタイル設定することもできます。基本的な例としては、プルダウンメニューの国名の横に国旗の画像を追加します。これを実現するには、オプションテキストの横に画像要素を追加します。

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>

より複雑な例としては、プルダウンで選択する項目を決める際に役立つプロフィール写真、名前、代替情報などがあります。

<option value="eur">
    <img src="euro-flag.png" alt="" />
    <div class="currency">
      <div class="currency-short">EUR</div>
      <div class="currency-long">Euro</div>
    </div>
    <div class="symbol" aria-hidden="true">€</div>
</option>

選択したオプションにスタイルを適用する

選択したオプションを、選択した状態とドロップダウンで異なるように表示したい場合もあります。たとえば、Gmail の UI では、スペースを節約するために、オプションを選択するとラベルが削除されます。そのためには、スタイル設定用の <selectedoption> 要素にフックします。<option> には、次のすべてのマークアップが含まれます。

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

次に、<selectedoption> 内の .text に display: none を適用して、テキストコンテンツを非表示にし、アイコンのみを表示します。

selectedoption .text {
  display: none;
}

インタラクティブオプション

::picker(select) のスタイルを完全に制御し、前のデモを基に、ホバーとフォーカス時にインタラクティブにします。このデモでは、新しい calc-size() 関数を使用して、ホバー時にアイコンを表示するピッカーの幅をアニメーションで変更し、オプションの全幅を表示します。また、選択ツールに focus-visible オプションがある場合は、そのオプションも表示します。

/* base styles when picker is open but not interacted with */
::picker(select) {
  width: var(--icon-width);
  transition: width 0.5s;
}

/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
  /*  auto width!  */
  width: calc-size(auto, size + 0.5rem);
}

ホバーまたはフォーカス時にコンテンツが段階的に表示される、インタラクティブな Gmail スタイルの選択。

制限事項とユーザー補助に関する注意事項

大きな力には大きな責任が伴います。アクセスを維持するために、この機能にはいくつかの制限があります。

<option> 要素を除き、<select> 内にインタラクティブな（フォーカス可能な）要素（ボタンなど）を配置することはできません。現時点では、提案されているコンテンツモデルでは <div>、<span>、<option>、<optgroup>、<img>、<svg>、<hr> の各要素のみが許可されます。
分割ボタンは現在試験運用段階で、ユーザー補助に対応したソリューションの開発に取り組んでいます。

今後、これらのエクスペリエンスのユーザー補助に関する詳細が明らかになるにつれて、コンテンツモデルはより柔軟に拡張される予定です。

まとめ

この機能は、ワーキンググループと標準化団体によって進展しており、Google はプロトタイプの作成とこの機能の形状の評価を積極的に進め、進捗状況をお知らせします。想定どおりに動作しない場合は、お知らせください。

この機能はまだ開発中ですが、簡単なフィードバックフォームからご意見をお寄せください。

ウェブ上でアクセスに優れ、カスタマイズ可能なフォームコントロールを簡単に作成できるように、この取り組みにご協力いただきありがとうございました。