CSSの画像を使用して選択フィールドのスタイルを変更し、画像が表示されないOperaを除くすべてのメインブラウザで必要に応じて表示します。
私も解決策を見つけようとしていることを説明するためにJSfiddleを作成しました。Operaで試してみると、私が何を意味するのかがわかります。
http://jsfiddle.net/muhi101/Gj29j/9/
ありがとう
ムヒ
質問する
1604 次
2 に答える
0
特にクロスブラウザの完全なサポートが必要な場合は、実際の選択ボックスのスタイルを設定することは実用的ではありません。最善の策は、選択ボックスを非表示にして、そのスタイルの模倣を作成することです。これを行うには2つの基本的な方法があり、両方でjQueryプラグインを使用できます。
ボタンを非表示にして偽造する
選択ボックスのスタイルを変更する最も安全な方法（IE6のサポートが必要ない場合）は、選択ボックスの不透明度を0にして（完全に透明にする）、必要に応じてスタイルを設定したdivの上に配置することです（不透明度のみ）。ドロップダウン部分ではなく、選択ボックスのボタン部分に影響します）。ユーザーにはスタイル設定されたボタンが表示されますが、すべてのUIイベントは実際のボタンによって処理されます。このアプローチは、IE6（選択ボックスでの不透明度の使用をサポートしていない）を除くすべてのブラウザーで機能します。
この例については、jQueryUniformのデモを参照してください。
これは、使いやすさとアクセシビリティに影響を与えずに選択ボックスのスタイルを設定できる限りです。また、このアプローチは、プラグインやjQueryを使用せずに、必要に応じて誰かが自分で実装できるほど単純です。このアプローチの制限は、ボタン自体は完全にスタイル設定できますが、ドロップダウンメニューのスタイル設定はほとんど不可能であるということです。
選択ボックス全体を非表示にして偽造する
もう1つのオプションは、選択ボックスを完全に非表示にして、ボタンとドロップダウンメニューの両方を完全なスタイルの模倣に置き換えることです。この場合、すべてのUIイベントは模倣によって処理されます。
このいくつかの例については、jqTransformとUISelectmenuのデモを参照してください。
このアプローチでは、ボタンとドロップダウンメニューの両方を完全にスタイル設定できますが、使いやすさとアクセシビリティが失われます。通常、スクリーンリーダーは適切にサポートされておらず、ユーザーがタッチデバイスの選択ボックスをクリックしても、ネイティブのピッカーポップアップは表示されません。また、このアプローチは、ほとんどの人がプラグインを使用せずに実装するには複雑すぎます。
于 2012-08-13T13:01:52.383 に答える
0
select 要素のスタイル設定は、すべてのブラウザーで 100% サポートされているわけではありません。
この jquery ui: https://github.com/fnagel/jquery-uiを試してみてください。これにより、独自の選択リスト要素を設計できます。
于 2012-08-13T10:25:53.613 に答える