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

フォームをスタイルするのが苦手、中でもselect要素が最も苦手という人は少なくないと思います。Web制作者が苦痛だと感じているselect要素の不満点、select要素をクロスブラウザ対応で美しくスタイルするテクニック、select要素に対するブラウザの進化の紹介します。

サイトのキャプチャ

The Current State of Styling Selects in 2019

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

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

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

select要素を美しくスタイルするテクニック

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

See the Pen
select-css by Scott/Filament Group
by Chris Coyier (@chriscoyier)
on CodePen.

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

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

ドロップダウンの内側のスタイル

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

ドロップダウンを開いたキャプチャ

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

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

ドロップダウンの内側のスタイル

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

select要素の不満点

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

このアンケートを見ると、select要素での不満点は下記の通りです。

  • 検索に適していない
  • 開いているドロップダウンのスタイル(テキスト以外のオプションも含む)
  • 要素を閉じずに更新
  • 何も選択されていない場合やアイテムが選択されている場合のスタイル

私はmulti-selectがうまくいかなったことには驚きました。おそらく、後方互換性がないため、<select>と同じテーブルには乗らないのかもしれません。

select要素に対するブラウザの進化

Edgeは最近、フォームコントロールの外観を改善することを発表しましたが、デフォルトやカスタマイズ方法についてはまだ説明されていません。

Edge/Chromiumでの外観

Edge/Chromiumでの外観、左改善前、右改善後

しかし、これは良い流れだと思います。
より多くの情報が必要な人は、下記でチェックできます。

sponsors

top of page

©2019 coliss