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

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

Una Kravets

<select> 要素のようなフォームコントロールのスタイル設定は、デベロッパーが長年にわたって最大の課題として挙げており、その解決策に取り組んできました。この作業は複雑で、完成に長い時間がかかりましたが、機能の実装に近づいています。カスタマイズ可能なバージョンの select 要素は、WHATWG で正式にステージ 2 に移行しており、クロスブラウザでの関心が高く、Chrome Canary 130 からプロトタイプをテストできます。

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

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

機能に関するフィードバックを送信するには、こちらのフォームを使用してください。所要時間は 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` 内のすべてのテキストコンテンツは、select 要素のフォールバックバージョンでレンダリングされます。

基本スタイル

変更は、選択要素の視覚的なスタイル設定と同じくらい簡単です。たとえば、ボタンのスタイル、カーソルを合わせてフォーカスのスタイル、選択オプションの背景を更新します。appearance: base-select でオプトインした後、選択部分に必要な CSS を適用します。

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

<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 があります。この 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);
}

</ph>

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

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

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

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

将来的には、こうしたエクスペリエンスのアクセシビリティに関するストーリーが具体化されるため、コンテンツモデルはより柔軟に拡張することが期待されます。

まとめ

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

この機能はまだ開発中のため、こちらの簡単なフィードバックフォームからフィードバックをお寄せください。

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