html select replacementのヘルプ

Question

CSSを使用してIEでスタイル設定することができないため、デフォルトの選択コントロールが嫌いです。 これは、HTML + CSS + JavaScriptを使用して、最初から新しい選択コントロールを開発した理由です。 私は過去2日間でCSSとHTMLを組み合わせて素晴らしい仕事をしましたが、今日は修正するのが非常に難しいバグを発見しました。 IE 7では

、私は同じページに牽引コントロールを持っている場合、トップから1を下から1をオーバーレイしません。

画像を参照してください：coolrgbドットコム/ファイル/選択-help.jpg

デモページ（HTML + CSS + Javascriptを）ダウンロード：coolrgbドットコム/ファイル/ select-help.zip

を助けてください、このコントロールは私にとってとても素敵で、今から私のすべてのプロジェクトで使いたいと思っています。このバグは私の希望と多くの時間を殺しました。

ありがとうございます。

Answer 1

あなたは、それぞれが同じz-率を制御与える場合は、重なり順序を制御できません。

私はより本物のSELECT要素のように動作するためにあなたの制御を変更することをお勧め：一方のみが一度に開いている、またはフォーカスを失うと、それをクローズする原因となることができます。または、コントロールにフォーカスがあるときは高いz-インデックスを、そうでないときは低いz-インデックスを設定できます。

のために外を見るためにもう一つ：ラジオ、チェックボックスのようないくつかの他のコントロールを入れてみてください、そしてあなたのコントロール下で選択します。あなたは、たとえあなたが彼らの答えに説明された@grawityと異なるz-indexを与えても、IEがそれらを覆い隠すことはないことが分かります。これは、次のように、これらの要素の上にウィジェットのデモが表示されるのが一般的です。http://jqueryui.com/demos/dialog/

これを修正する典型的なハックは、iframeを使用することですが、おそらく別の質問に値するでしょう。

Answer 2

編集：質問を再読み込みした後、この答えは今、全く関係のないようだが、私はとにかく、ここでそれを維持しています。

は本当に答えが、説明しようとしない：他のすべての要素は、ウィンドウなしのコントロール（これは彼らがスタイルを可能にする）している間

Internet Explorerでは、<select>タグは、簡単なwindowed controlsとして実装されています。そのため、これらのタグは常に上にあり、zオーダーのルールに従っていません。 （ドロップダウンメニューの部分はウィンドウなしのコントロールになるようにスタイルが可能でなければならないので、メイン部分の下に表示されます）

Firefoxではすべての要素にウインドウがありません。IE8でもそうです。