`<select>` がCSSでカスタマイズ可能に

 (developer.chrome.com)
8 ポイント 投稿者 xguru 2025-03-28 | 4件のコメント | WhatsAppで共有
  • Chrome 135 から、アクセシビリティ標準を維持しつつ <select> 要素を CSS でカスタマイズできる新機能のサポートが始まった
  • 長年にわたる仕様調整と開発を経て、古いブラウザーでも壊れない堅牢なコンポーネントとして提供される
  • HTML コンテンツも含められ、appearance: base-select の追加によってアニメーションやスタイルなど多様なカスタマイズが可能になった

appearance: base-select の紹介

  • 新しい CSS プロパティ appearance: base-select は、<select> 要素をカスタマイズ可能な新しい状態にする 
    .custom-select {  
  &, &::picker(select) {  
    appearance: base-select;    
  }  
}

  • base-select 使用時に追加される新機能

    • <select> 内コンテンツに対するブラウザーの HTML パーサー動作の変更
    • レンダリング方式と内部構造の変更
    • 新しい内部パーツと状態の提供
    • 最小限のデフォルトデザインを提供（カスタマイズ最適化）
    • 表示されたオプションはポップオーバーのようにトップレイヤーに現れる
    • オプション位置は anchor() で制御可能

  • base-select 使用時に失われる機能

    • ブラウザーウィンドウ外への <select> のレンダリング不可
    • モバイル OS の標準選択 UI は呼び出されない
    • 最も長い <option> の幅を反映しない

<select> に HTML コンテンツを含められる

  • 従来は <option> 内に画像や SVG を挿入してもブラウザーが無視していた
  • appearance: base-select を適用すると HTML がそのままレンダリングされる
  • Chrome では SVG を含むオプションが表示されるが、Safari、Firefox などは対応していない
  • CodePen デモ: 実習リンク
  • この機能は Finch 実験として導入されており、必要に応じて中止される可能性がある

完全なカスタマイズが可能

  • base-select のすべての構成要素は置き換え、アニメーション、スタイル適用が可能
  • さまざまなデザインを通じて意味のある選択 UI を構築できる
  • 例としては、状態表示、アバター付きオプション、カラーピッカー、投稿状態の選択などがある
  • CodePen デモ: 実習リンク

JavaScript インターフェースに変更なし

  • 既存の <select> に対する JavaScript の動作は同じまま維持される
  • ただし、<option> に HTML を入れた場合は選択値のパース方式が変わったため、テストが必要
  • value 属性を使っている場合は別途修正は不要

追加資料

Web 標準

Chrome 関連資料

コミュニティ資料

カスタマイズされた <select> を活用したデモ

関連記事

4件のコメント

 
GN⁺ 2025-04-01
Hacker Newsの意見

  • この機能に自分が不釣り合いなほど興奮しているのは、たぶん2000年代初頭のWeb開発者だった自分をさらけ出しているのだと思う。select要素はHTMLで再現できない機能を提供するので、とても有用な機能だ

    • 次はオートコンプリートとタグピッカーも追加すべきだ

  • この機能が広くサポートされるまでは、プログレッシブエンハンスメントとして使うべきだ。現時点では caniuse.com によると世界全体で46%が対応している

    • 非対応ブラウザのユーザーに悪い体験を与えないよう注意する必要がある
    • 新しいスタイリングに重要な情報や機能を含めないことが重要だ

  • この機能が実装されるのを見るのはとてもうれしい。カスタムの選択ボックス代替物よりもはるかに大きな改善になるだろう

  • 組み込みのモバイルOSコンポーネントをトリガーしない点が心配だ。組み込みコンポーネントは信頼性が高く、アクセシブルで、反応も良い

    • Android UIが開くと信頼できるので安心だ。select要素だけでなく日付/時刻入力にも当てはまる

  • スタイルを適用しない方がよいコントロールもある。スクロールバーは細すぎたり色のコントラストが悪かったりして使いにくいことがある

    • デフォルトのselect要素は最も見た目が良いコントロールではないが、役目は果たす

  • Web開発者たちが数十年待ち続けてきたもののように思える。多くのJSライブラリを置き換える可能性がある

    • Chromeは入れていないが、サンプル動画で複数選択フィールドをどう扱っているのか気になる

  • select要素をChromiumブラウザでCSSでカスタマイズできるようになった

    • Web標準はますます複雑になっている

  • FirefoxのIssueへのリンクが提供されている

  • このまま進めば、じきにVB6と機能的に同等になるだろう

  • 壊れたJSライブラリよりはましだ。ただ、オプションが多いときにレイアウトがどうなるかが最大の関心事だ

    • 組み込みのモバイルOSコンポーネントをトリガーしない点が怖い。レイアウトがどうなるのか気になる
    • 表示されるオプションは anchor() で位置決めされる
    • 実験的ではあるが、おそらくこの部分がいちばん良いかもしれない。CSSで本当に機能するなら驚くべきことだろう
 
carnoxen 2025-03-28

では、<selectlist> は不要になるのでしょうか？
 
deminoth 2025-03-28

余談ですが、Slackボットではタイトルの <select> が表示されないですね（笑）
 
xguru 2025-03-28

あっ… これは後で修正します。