Internet Explorer のドロップダウン リストの幅をコンテンツの長さに合わせて調整する方法

Internet Explorer でのドロップダウンリストの幅のカスタマイズ

Internet Explorer では、多くの場合、ドロップダウン リストの幅は、含まれているドロップボックスの幅と一致する固定幅になります。これにより、ドロップダウン リスト内のコンテンツの長さが異なる場合、見苦しい結果が生じる可能性があります。この問題に対処するには、CSS を使用してドロップダウン ボックスとドロップダウン リストに異なる幅を設定することを検討してください。

解決策の 1 つは、JavaScript と CSS を組み合わせて使用​​することです。このアプローチは、jQuery を利用してドロップダウン リストとのユーザー操作を検出します。リストにフォーカス、ホバー、またはクリックすると、JavaScript は要素にクラスを追加して幅を拡張します。要素がフォーカスを失うか、要素の上にマウスが置かれなくなると、クラスは削除されます。

このソリューションを実装するには、次の JavaScript コードをプロジェクトに組み込むことができます。

<code class="javascript">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'); });
}</code>

さらに、 CSS を使用して、ドロップダウン ボックスとドロップダウン リストに希望の幅を設定できます。

<code class="css">select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}</code>

影響を受けるドロップダウン要素に「ワイド」クラスを割り当てることで、アプリケーションの特定の領域でこの機能を有効にすることができます。 。このアプローチにより、よりユーザーフレンドリーなエクスペリエンスが提供され、ドロップダウン リストの幅が含まれるコンテンツに確実に適応するため、過剰な空白スペースが不要になります。

以上がInternet Explorer のドロップダウン リストの幅をコンテンツの長さに合わせて調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。