ウェブページのカスタム選択ボックス選択

選択ドロップダウン リスト フォームは誰もがよく知っているかもしれませんが、デフォルトのドロップダウン リスト フォームでは一部の Web サイトの見た目が醜くなってしまうことが多く、CSS を使用して選択スタイルを調整することも困難です。そのため、ウェブサイトのスタイルに合わせた選択ドロップダウンフォームを作成するために、多くのウェブサイトでは JS を使用してこの効果をシミュレートすることがよくあります。

たとえば、おなじみの Tudou.com、Taobao Mall、Amazon はすべて、ドロップダウン リスト フォームを作成するために JS を使用しています。

その結果、ウェブサイト全体のスタイルと視覚的に統一され、ドロップダウン リストのスタイルは非常に美しくなりましたが、いくつかの副作用ももたらしました。JS で行われるため、予期しない影響が多く発生します。3 つのウェブサイトのテストを通じて、それぞれの欠陥を 1 つずつ分析してみましょう。

Tudouの検索カテゴリ選択ボックスは、クリックするたびに奇妙な感じがします。

1. クリックした後、ポップアップ リストの位置が予想と異なります。無意識のうちにドロップダウン リストだと思っていましたが、Tudou は「中間ドロップダウン リスト」を表示しました。
2. 習慣的に上下キーを使用して項目を選択しますが、代わりにページ全体がスクロールします。
3. 怒りのあまり、それをシャットダウンしたくなる。 ESC キーを押しても何も起こりませんでした。
4. JS を無効にすると、完全に使用できなくなります。

同様に、 Taobao Mallも美しく見えます。

1 点目を除き、その他は Tudou と同じで、アクセシビリティとユーザビリティに問題があります。

解決策は簡単だ、 Amazonのようなネイティブの選択ボックスを使用するだけです。

Web ページでカスタム選択ボックスの使用が推奨されないのはなぜですか?

選択ボックスは非常に成熟したインタラクティブ コントロールです。成熟とは、ユーザーが容易に受け入れることができることを意味しますが、成熟とは、さまざまなユーザーを慎重に考慮し、非常に豊富なインタラクティブな詳細があることも意味します。たとえば、PgUp/PgDn、Home/End などのキーボード操作に応答したり、さまざまな位置にあるドロップダウン リストのポップアップ方向を自動的に調整したりします。

JS を使用して選択ボックスをシミュレートするには、多くの作業と慎重なテストが必要です。たとえ企業が投資する意思があったとしても、ネイティブ コントロールの一部の機能を実現することはできません。たとえば、上記の Amazon の選択ボックスでは、ブラウザを非常に低く引いており、ドロップダウン リストがブラウザの外側まで伸びています。

ちょっとした「視覚的なデザート」のために、インタラクションでは多くの実用的な詳細が失われ、フロントエンドプログラマーの多くの時間が無駄になりますが、その結果は報われない作業となり、本当にひどいものになります。

PS: カスタム選択ボックスを使用するには、次の条件を満たす必要があります。

1. Google と同じくらい熱心になり、多くの時間とリソースを費やす覚悟があること。
2. Google と同じように細心の注意を払ってください。何かをしたいなら、きちんとやりましょう。何かをシミュレートしたいなら、徹底的にシミュレートしましょう。
3. Webアプリで申請します。

残念ながら、国内には Google や Facebook ほど熱心で細心の注意を払う企業は存在しません。