-1

ここでこれを扱っている投稿をたくさん見てきましたが、これをすぐに理解することはできません。

カスタム イメージで選択ボックスのスタイルを設定しようとしています。私が設定した方法はopacity:0;、選択ボックスを設定し、背景画像でその背後に div を設定し、javascript を使用して現在選択されている値を div 内に設定することです。Firefox、Chrome、Safari では動作しますが、IE ではうまくいきません。

例 1: opacity = 0、div の背景画像なし。イベントは発生しますが、何も表示されません。

例 2: 不透明度 = 0、div には背景画像があります。Firefox、Chrome、および Safari では完全に動作しますが、IE では動作しません。

例 3: 不透明度 = 1、div の背景画像なし。イベントは発生せず、通常の選択動作は存在しないようです。

例 4: 不透明度 = 1、div には背景画像があります。イベントは発生せず、通常の選択動作は存在しないようです。

注: 例 3 と 4 から opacity:1 を削除しましたが、同じ動作が得られます。また、選択ボックスで 50 の z-index を使用し、div で 0 の z-index を使用して、それらが選択の背後に表示されるようにします。ただし、その反対は異なる動作を提供するようには見えません。

記録のために、.click、.change、.live("click") .live("change") .live("click change")、.on("click")、.on("change" ) .on("click change") は、4 つのブラウザーでテストする限り、私の例 #2 にあります。私の究極の質問は、なぜ example 2 が ie で機能しないのかということです。二次的な質問は、不透明度とその選択ボックスへの影響とは何ですか? 私はそこにあるものは何もないと想定していますが、なぜ不透明度が重要なのかまだわかりません。実際のコードを投稿する必要がある場合は、投稿できます。しかし、提供したテスト ページで JavaScript と CSS を確認できるはずです。

4

1 に答える 1

1

次のような要素をネストする必要があります

<div class="styled-dropdown-container">
     <select>...</select>
</div>

clickその後、 にイベント リスナーを追加できます.styled-dropdown-container。イベントはドロップダウンから正しく伝播 (バブルアップ) し、ユーザーが入力に手動でフォーカスした場合 (つまり、タブで移動) にもシミュレートされます。

于 2012-05-24T22:07:54.327 に答える