如何在不同瀏覽器中自訂下拉清單寬度？

IE 下拉清單寬度修改

在Internet Explorer 中，下拉清單鏡像其保管箱的寬度，而在Firefox 中，它會適應內容。此限制需要擴展保管箱以容納最長的選擇，從而導致網頁美觀不美觀。

基於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 中探索現場演示：[link]

以上是如何在不同瀏覽器中自訂下拉清單寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！