4

CSS3 で選択ボックスのスタイルを設定する方法のサンプルを使用して、次のフィドルをセットアップしました。IE9で困っています。および疑似要素は、それらが配置されているドロップダウン矢印の「クリック」アクションを妨げていますlabel:before。label:afterこれは、IE9 を除くすべてのブラウザーで問題なく動作します。これを機能させる方法を知っている人はいますか? ぜひ聞きたいです！

http://jsfiddle.net/CXJTv/

PS私はcssのアイデアにのみ興味があります。これを正しく機能させるために JavaScript を必須にしたくありません。

4

2 に答える 2

2

不透明度がゼロの2番目の選択を使用します。

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
          
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

于 2012-10-07T18:39:49.027 に答える
0

現在の実装で IE に問題がある場合は、いつでも Modernizer を使用するかconditional statements、IE をドロップダウンの矢印に組み込まれている標準に戻すことができます。

これは、条件ステートメントを使用して、IE ではないブラウザーの場合にのみクラスを解析するフィドルです。

ここで、純粋なcssを使用して選択ドロップダウンにカスタムスタイルを使用するのにおそらく役立つ質問に答えました。

于 2012-12-20T10:56:44.330 に答える