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

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

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

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

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

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

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

同様に、 Taobao Mallも美しく見えます。
タオバオセレクト.png

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

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

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

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

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

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

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

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

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

<<:  js 配列エントリ() 反復メソッドを取得する

>>:  純粋な CSS3 で美しい入力ボックスアニメーションスタイルライブラリを実現 (テキスト入力愛)

推薦する

さまざまなMySQLインデックスの使用方法の詳細な説明

1. 遅いクエリログ1.1 MySQL ログの種類ログは、データベースの操作や、ユーザーがデータベー...

Linux システムが VMware にインストールされているかどうかを確認する方法

現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...

Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル

導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...

MySQL 5.7.21 履歴データディレクトリからデータを復元するチュートリアルの解凍バージョン

状況の説明: データベースが異常に起動およびシャットダウンしたため、サービスを再度起動したときに「起...

antd+reactプロジェクトをviteに移行するためのソリューションの詳細な説明

Antd+react+webpackは、多くの場合、Reactテクノロジースタックに基づくフロントエ...

初心者がHTMLタグを学ぶ(1)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

DockerでSpringbootプロジェクトを実行する方法

1. IDEAの下にあるターミナルをクリックし、mvn clean installと入力します。 次...

メタ情報に基づいて時間指定のページ更新またはリダイレクトを実装する

メタを使用して、ページの時間指定更新またはジャンプを実装します。 XML/HTML コードコンテンツ...

Zabbix上のすべてのホストのIPとホスト名を取得する

ザビックスZabbix ([`zæbiks]) は、WEB インターフェースに基づいて分散システム監...

Docker Alibaba Cloud RocketMQ 4.5.1 のデプロイプロセスの詳細な説明

検索ミラー docker 検索 rocketmq画像バージョンを表示他の画像を表示したい場合は、画像...

React プロジェクトにおける axios カプセル化と API インターフェース管理の詳細な説明

目次序文インストール導入環境の切り替え傍受を要求するレスポンスインターセプションAPIの統合管理要約...

Baotaパネルを再起動すると、「-ModuleNotFoundError: No module named 'geventwebsocket'」というメッセージが表示されます。

背景:サーバーがFlaskプロジェクトをデプロイし、python3をインストールしたため、再起動時に...

Linux でログインタイムアウト後に非アクティブなユーザーを自動的にログアウトする

方法1: .bashrcまたは.bash_profileファイルを変更するこれは、ホーム ディレクト...

CentOS 7 で PHP 5.4 を 5.6 にアップグレードする方法の簡単な分析

1.ターミナルに入ったらPHPのバージョンを確認するphp -v出力は次のようになります。 PHP ...

両端揃えレイアウトを実現する CSS 列のサンプルコード

1. 堂々巡りいろいろ試行錯誤した結果、均等割り付けレイアウトを実現する最も簡単な方法は CSS ...