如何在不同浏览器中自定义下拉列表宽度？

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中文网其他相关文章！