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

要素を CSS でカスタマイズできるようになりました

Adam Argyle

公開日: 2025 年 3 月 24 日

Chrome 135 以降では、ウェブ デベロッパーとデザイナーが、ウェブ上でアクセス可能で標準化され、CSS でスタイル設定可能な <select> 要素を統一して使用できるようになりました。このコンポーネントは、長年にわたるエンジニアリングと共同仕様作業によって完成しました。その結果、古いブラウザでも動作する、非常に豊かで強力なコンポーネントが誕生しました。

これらの新機能を使用してカスタマイズされたセレクトの動画は次のとおりです。

Una によるコミュニティからのフィードバックを求めるリクエスト以降、仕様の名称と機能が一部変更されています。幸い、その投稿を参考にして作成した動画で、変更点について Una が解説しています。

また、カスタマイズ可能なセレクタに関する MDN のドキュメントも新しく公開され、詳細が記載されています。

appearance: base-select に会う

新しい CSS プロパティ appearance: base-select: <select> 要素を、一般に「ベース」スタイルと呼ばれる、構成とスタイル設定が可能な新しい状態にします。

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

base-select を使用すると、次のような新機能や動作が有効になります。

• <select> 内のコンテンツのブラウザの HTML パーサーを変更します。
• <select> のレンダリングされた内部を変更します。
• <select> の新しい内部パーツと状態を公開します。
• カスタマイズに最適化された、新しいミニマルなデザイン。
• 表示されるオプションは、ポップオーバーのように最上位レイヤにあります。
• 表示されるオプションは anchor() で示されています。

base-select を使用すると、次のような機能や動作が失われます。

• <select> はブラウザペイン外にはレンダリングされません。
• モバイル オペレーティング システムの組み込みコンポーネントはトリガーされません。
• <select> は、最も長い <option> の幅を取得しなくなります。

<select> にリッチな HTML コンテンツを含めることができるようになりました

<select> をカスタマイズできるようになる前は、画像や SVG などを <option> 要素に配置しても、ブラウザはそれを無視していました。

次の HTML について考えてみましょう。ブラウザは、作成したとおりに HTML を読み取ります。

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

ただし、使用される DOM には <svg> は含まれません。

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

以下は、上記の HTML をレンダリングした Chrome、Safari、Firefox です（左から右）。ブラウザが appearance: base-select をサポートしている場合、SVG がオプションに表示されますが、サポートしていない場合は表示されません。

パーサーの変更により、カスタマイズ可能な選択機能が含まれる既存のウェブサイトが破損するリスクがあります。Chrome では、緊急時にオフにする必要が生じた場合に備えて、Finch テストの背後に機能が用意されています。問題がなければ、テストは終了し、コードはソースに恒久的に送信されます。

完全カスタマイズ可能

base-select のすべての部分は、入れ替え、カスタマイズ、アニメーション化できます。以下は、すべての新機能を使用した、認識しやすく有意義な選択エクスペリエンスを作成するデモです。

その他の例については、この記事の最後にあるリソース セクションをご覧ください。

変更されていない JavaScript インターフェース

<select> 要素との既存の JavaScript インタラクションにはリスクはありません。

ただし、<option> 要素にリッチ HTML を追加する場合は、選択した値をテストする必要があります。ブラウザは画像と SVG を解析して無視するためです。ただし、選択されたコンテンツ文字列を決定するロジックが変更されているため、オプションの内容によっては調整が必要になる場合があります。

<option> で value 属性を使用している場合は、心配する必要はありません。

リソース

Chrome は base-select を最初に実装しましたが、すべてのブラウザが仕様に参加しており、まだ完成していない「ベース」要素が他にもあります。これはほんの始まりにすぎません。

今後も、特定の要素のカスタマイズに関するガイダンス、例、リソースを追加していく予定です。それまでは、以下のリンクから詳細をご確認ください。

• ウェブ標準
  • UI-Select を開く
  • HTML 仕様のプル リクエスト
  • 発送の意向
  • MDN
• Chrome
  • コメント リクエストと Una の詳細な説明
  • コメント募集の結果
  • <select> で <hr> を使用する
  • Una が部品について説明している
  • Una の Codepen コレクション
• コミュニティ
  • Brecht De Ruyte の Codepen コレクション
  • ネイティブ セレクタとカスタム セレクタの CSS のヒント
  • Open Props UI-<select>
  • 遷移アニメーションを使用したカスタム選択の例

このプロジェクトの実現にご協力いただいたすべての皆様に心より感謝いたします。

特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。

最終更新日 2025-03-24 UTC。