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

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

選択ドロップダウン リスト フォームは誰もがよく知っているかもしれませんが、デフォルトのドロップダウン リスト フォームでは一部の 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にコメント情報を追加する実装

序文最近、MySQL に関するメモをいくつか尋ねる人がいたので、ブログ記事を書かなければなりません。...

Webstorm と Chrome を使用して Vue プロジェクトをデバッグする方法

目次序文1. 新しいVueプロジェクトを作成する2. WebStormの設定1. デバッガポートを設...

正の整数かどうかを判断するMYSQLカスタム関数の例コード

関数を記述できます。主に正規表現を使用して判断を行います。入力文字が空の場合は、「-」を使用して置き...

VMware仮想マシンでのLinuxのコピー&ペーストの詳細な説明

1. VMware Workstation 上の Linux: 1. ソースの更新(オプション) v...

メタタグを簡単に説明すると

META タグは、一般的に タグと呼ばれ、HTML Web ページのソース コード内の重要な HTM...

Navicat PremiumでSQLファイルをインポートする方法

今日、最終プロジェクトに取り組み始めましたが、今年はMySQLデータベースを使用したため、Navic...

HTML タグ: サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。関連記事: HTML タ...

MySQL ステートメントの実行順序と書き込み順序の例の分析

選択ステートメントの完全な構文は次のとおりです。 選択 DISTINCT <選択リスト>...

Windows で MySQL 5.7.17 圧縮バージョンをインストールするときに遭遇する落とし穴

まず、Windows 64 ビット用の最新の MySQL 5.7.17 コミュニティ圧縮バージョンを...

Vueは画像のズームとドラッグをサポートするリッチテキストエディタを統合しています

必要:ビジネス要件によると、写真をアップロードできる必要があり、アップロードされた写真はモバイル端末...

HTML 中国語文字エンコード標準の概要

HTML では、Web ページで使用されるエンコーディングを指定する必要があります。一般的な指定方法...

CSSポジショニングによる階層関係の問題の詳細な説明

絶対、相対、固定位置の位置決めabsolue: 絶対配置。上、下、左、右を使用して、配置先の親要素に...

写真とテキストによる MySQL と sqlyog のインストール チュートリアル

1. MySQL 1.1 MySQLのインストールmysql-5.5.27-winx64 ダウンロー...

MySQLインデックスを正しく作成する方法

インデックス作成は大学図書館の書誌インデックスの構築に似ており、データ検索の効率を向上させ、データベ...

Photoshop を使って Web ワイヤーフレームを作成する方法

この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...