HTMLのselect要素がCSSでカスタマイズ可能になる

BRANK

select 要素がカスタマイズできるようになるこれまで HTML の<select>要素はカスタマイズが難しい部分でした。各ブラウザのデフォルトスタイルに依存しデザインや機能を統一するのが困難でした。かといってオリジナルのセレクトボックスを作成するとなると CSS と JavaScript でイチから作成する必要がありました。しかし今後、HTML ネイティブの<select>要素に柔軟にスタイルを加えることができるようになるようです。イチから作成したセレクトボックスをネイティブのselect要素と同等レベルでアクセシビリティやパフォーマンスに配慮して、各 OS に最適化されたユーザー体験にするのは至難の業ですので、ネイティブ<select>要素がカスタマイズできるということは革命的なことだと思います。本記事では、実際に<select>要素のカスタマイズ機能が先行的に実装されている Canary 版の Chrome を使用して、カスタマイズ機能を試した様子を紹介していきます。 appearance: base-select を指定します。こちらを指定することで以下画像の右のようなベーススタイルを全ブラウザで適用することができます。 select, ::picker(select) { appearance: base-select; } 左:appearance:…