誰もが選択されたドロップダウンリストフォームに精通しているかもしれませんが、デフォルトのドロップダウンリストフォームにより、いくつかのWebサイトが醜いと感じることがよくあり、CSSを使用してSelectのスタイルを調整することは困難です。したがって、多くのWebサイトは、Webサイトスタイルに沿った選択されたドロップダウンフォームを作成し、JSを使用してこの効果をシミュレートします。
たとえば、Tudou.com、Taobao Mall、Amazonはすべて、JSで作成されたドロップダウンリストフォームです。
この結果は、ウェブサイトの全体的なスタイルで明らかに視覚的に統一されており、ドロップダウンリストスタイルは非常に美しいですが、いくつかの副作用ももたらします。 JSで行われているため、多くの予期しない効果が発生します。テスターの3つのWebサイトを使用して、それぞれの欠陥を分析しましょう。
ジャガイモの検索カテゴリ選択ボックスは、クリックするたびに奇妙に感じます：
1.クリックした後、ポップアップリストは期待するものとは異なります。無意識のうちに、それはドロップダウンリストでしたが、ジャガイモは私にミッドダウンリストを与えてくれました。
2。アップ/ダウンキーを使用して習慣的に選択しますが、ページ全体がスクロールされています。
3。怒りの中で、私はもうそれを閉じる必要はありませんでした。 ESCキーを押しますが、応答はありません。
4。JSを無効にした後、完全に利用できません。
同様に、Taobaoモールも美しく見えます：
ポイント1を除き、他のすべてはジャガイモのようなもので、アクセシビリティと可用性の問題があります。
ソリューションは非常にシンプルです。Amazonなどのネイティブ選択ボックスを使用するだけです。
Webページでカスタム選択ボックスを使用することをお勧めしないのはなぜですか？
Select Selectボックスは非常に成熟したインタラクティブコントロールです。満期とは、ユーザーが受け入れやすいことを意味しますが、成熟度は、思いやりがあり、非常に豊富なインタラクティブな詳細を持っていることも意味します。例：PGUP/PGDN、ホーム/エンド、ドロップダウンリストのポップアップ方向などのキーボード操作への応答は、異なる位置などで自動的に調整できます。
JSを使用して選択ボックスをシミュレートするには、多くの作業と細心のテストが必要です。たとえ会社が投資する意思があるとしても、ネイティブコントロールのいくつかの機能を実装することはできません。たとえば、上記のAmazon選択ボックスでは、ブラウザを非常に低いレベルに引き上げ、ドロップダウンリストをブラウザの外側に拡張できます。
少しの視覚的なデザートの場合、インタラクションを非常に多くの時間を失うのに非常に多くの実用的な詳細が必要であり、フロントエンドのプログラマーには多くの時間がかかりましたが、それはありがたいことでした。
PS：カスタム選択ボックスを使用するには、次の条件を満たす必要があります。
1。グーグルと同じくらいクレイジーで、多くの時間とリソースを費やすことをいとわない。
2。Googleと同様に細心の注意を払って、それをうまくやり、徹底的にシミュレートします。
3. Webアプリに適用します。
残念ながら、国では、GoogleやFacebookと同じくらいクレイジーで細心の注意を払っています。