Web制作者が苦痛だと感じているselect要素の不満点と美しくスタイルするテクニック

Post on:2019年11月12日

はじめに

2019年、CSSで望まれている機能の一つは、フォームのスタイルでした。トップ5に入っています。

Greg Whitworthのデータによると、フォーム要素の中でも特にselect要素が他の要素よりも改善が期待されており、その数は倍以上です。制作者の多くは、select要素で実装するドロップダウンのスタイルをどうにかしたいと思っています。

select要素で実装するドロップダウンをもっとも美しくスタイルするテクニックはStyling a Select Like It’s 2019を見ると、よく分かります。
Codepenにそのコピーを作成しました。

スタイルシートの解説は、当ブログの記事をご覧ください。

このスタイルシートで注目すべき点は、完全にクロスブラウザに対応していることです。モダンブラウザのみではありません。ブラウザやOSによる視覚的な違いはいくつかありますが、全体的にはかなり一貫性があり、さらにカスタマイズするためのベースも提供されています。

ドロップダウンを開いてみます。
うーん、何もスタイルしていなかったように見えてしまいます。

select要素のスタイルは、ドロップダウンを開いたアイテムには何も影響しません。(macOS Chromeでのスクリーンショット)

ブラウザによっては内側のスタイルを定義できますが、非常に限られています。この道を進む時にはいつも、クロスブラウザ対応に苦労してきました。

Firefoxでは、ドロップダウンの背景とホバー時のカラーを定義できます。

Gregのデータによると、select要素の中で外側のスタイルが苦痛だと感じているのはわずか14%（3位）です。

不満点	％	数
リストの検索に適したユーザーエクスペリエンスを作成できない	27.43%	186
必要な範囲で<option>要素のスタイルを定義できない	17.85%	121
デフォルト状態のスタイルを定義できない（矢印なども含む）	14.01%	95
ポップアップのスタイルを定義できない（ボーダーやドロップシャドウなど）	11.36%	77
<select>コントロールや<option>内の単純なテキストを超えるコンテンツの挿入	11.21%	76
<option>要素への任意のHTMLコンテンツの挿入	7.82%	53
未選択・プレースホルダーのスタイルと動作を作成できない	3.39%	23
ポップアップが開いている間に大きなデータセットから新しいオプションを生成できる	3.10%	21
必要な範囲で現在選択されている<option>要素のスタイルを定義できない	1.77%	12
スマホで、ポップアップのスタイルを定義できない	1.03%	7
スクロール時にオプションを自動的に繰り返すことができない（例えば、オプション1〜100のリストがある場合、ユーザーが先頭にスクロールして戻るのではなく、100に達すると、1が100の下に表示される）	1.03%	7