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

要素を CSS でカスタマイズできるようになりました コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 .wd-authors { --avatar-size: 65px; display: flex; gap: 2em; } .wd-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .wd-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-authors { --avatar-size: 65px; display: flex; gap: 2em; } .dcc-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .dcc-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-author__links { display: flex; } .dcc-author__links a { margin-inline-end: 6px; } .dcc-author__links a:last-of-type { margin-inline-end: 0; } Adam Argyle X GitHub グリッチ ホームページ 公開日: 2025 年 3 月 24 日 Chrome 135 以降では、ウェブ デベロッパーとデザイナーが、ウェブ上でアクセス可能で標準化され、CSS でスタイル設定可能な <select> 要素を統一して使用できるようになりました。このコンポーネントは、長年にわたるエンジニアリングと共同仕様作業によって完成しました。その結果、古いブラウザでも動作する、非常に豊かで強力なコンポーネントが誕生しました。 これらの新機能を使用してカスタマイズされたセレクトの動画は次のとおりです。 Una、Brecht、Adam によるデモを紹介します。 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 がオプションに表示されますが、サポートしていない場合は表示されません。 こちらの Codepen で試す。 パーサーの変更により、カスタマイズ可能な選択機能が含まれる既存のウェブサイトが破損するリスクがあります。Chrome には、緊急時にオフにする必要が生じた場合に備えて、Finch 試験運用版の機能が用意されています。問題がなければ、試験運用版は終了し、コードはソースに恒久的に組み込まれます。 完全カスタマイズ可能 base-select のすべての部分は、入れ替え、カスタマイズ、アニメーション化できます。以下は、すべての新機能を使用した、認識しやすく有意義な選択エクスペリエンスを作成するデモです。 こちらの Codepen で試す。 その他の例については、この記事の最後にあるリソース セクションをご覧ください。 変更されていない 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。 投稿 バグを報告 未解決の問題を見る 関連コンテンツ Chromium のアップデート 事例紹介 アーカイブ ポッドキャストと番組 フォロー X での @ChromiumDev YouTube LinkedIn の Chrome for Developers RSS 利用規約 プライバシー Manage cookies English Deutsch Español – América Latina Français Indonesia Italiano Nederlands Polski Português – Brasil Tiếng Việt Türkçe Русский עברית العربيّة فارسی हिंदी বাংলা ภาษาไทย 中文 – 简体 中文 – 繁體 日本語 한국어