異なるブラウザ間でドロップダウン リストの幅をカスタマイズするにはどうすればよいですか?

IE ドロップダウン リストの幅の変更

Internet Explorer では、ドロップダウン リストはドロップボックスの幅を反映しますが、Firefox では、ドロップダウン リストはドロップボックスの幅に適応します。内容。この制約により、最長の選択範囲を収容するためにドロップボックスを拡張する必要があり、その結果、Web ページの見た目が美しくなくなります。

さまざまな幅に対する CSS ベースのソリューション

この問題を克服するには、 CSS を使用してドロップボックスとドロップダウン リストに異なる幅を許可するには、次の点を考慮してください:

以下に概説する jQuery ベースのメソッドは、クリックを含むすべてのキーボードおよびマウス イベントを処理します:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

これを組み合わせる次の CSS を使用してスクリプトを作成します:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

必要なドロップダウン要素に「wide」クラスを追加することで、これらの変更を適用できます。例:

<select class="wide">
    ...
</select>

この jsfiddle でライブ デモンストレーションをご覧ください: [リンク]

以上が異なるブラウザ間でドロップダウン リストの幅をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。