スタイリング選択フォーム（ドロップダウン）

Question

私はGoogleやさまざまなウェブデザインサイトを検索しましたが、フォーム内の選択しやすいドロップダウンボックスを設計するためのエレガントなソリューションに関する情報はほとんど見つかりませんでした。

私のテキスト入力フィールドは非常に大きく（高さ50px）、選択ボックスから同じ高さを感じるようになりました。

私の懸念は、システムの各ネイティブフォームエレメントにマッチするボックスのための2セット以上のイメージがあることです。助言がありますか？

ありがとうございました。

Answer 1

ユーザビリティとアクセシビリティ上の理由から、<select>要素以外は使用しないでください。 CSSを使用して、ユーザーのブラウザで許可されている程度に表示します。

あなた自身の選択を '作成'しようとすると、他の人のライブラリを使用すると、あなたのサイトの非標準デザインに一層合っているように見えるものはほとんど確実に作成されますが、 （もっと重要なのは）通常の選択と同じように動作しません。

• をIE/Windowsで同じ文字を入力して繰り返し、その文字から始まる連続した要素を選択します（：私は最後の（数年前）にチェックしたときに選択を開き、入力を開始場合例えば

  、たとえば 'c'を繰り返し押すと、最初に「カンボジア」、次に「カメルーン」、次に「カナダ」が選択されます。;別の手紙を入力すると、他の手紙で始まる最初の項目が選択されます（たとえば、「カンは最初に「カンボジア」、次に「アフガニスタン」、「ナミビア」を選択します）。あなたがそれらを呪文のように素早くタイピングサファリ/マックで

• は、オプションを選択する（例えばタイピングを最初に「カンボジア」を選択し、「カンボジア」とし、「カナダ」「できる」）。

プラットフォームを検出するこの現象をエコーバックするにはJavaScriptコードを書きますか？ WindowsとOS Xの違いだけでなく、さまざまなLinuxのウィンドウの違いをサポートする予定ですか？新しいOSバージョンがリリースされるたびに動作を確認して、それに応じてスクリプトを更新しますか？

要素がフォーカスされているときにマウスホイールを正しく操作することはできますか？すべてのGUIバリエーションについて？

偽の選択がフォームの検証で機能しますか？タブフォーカスはどうですか？ accesskeyショートカットはどうですか？

実際の<select>要素を使用して、あなたが持つ可能性のある制限を受け入れてください。