这个问题看起来很简单（overflow:hidden，对吗？），直到我无法解决它。我有一个定义大小的简单多行 SELECT：
<select size="10" name="elements">
...
</select>
MSIE 和 Opera 仅在需要时显示垂直滚动条，但 Firefox 和 Chrome 总是在禁用状态下显示垂直滚动条。
我尝试设置溢出、溢出-y，甚至溢出-x，但没有任何效果。有什么想法吗？
【问题讨论】：
标签： firefox select google-chrome scrollbar
在 Chrome 中，overflow: hidden 工作正常。
在 Firefox 中，您目前可以使用 scrollbar-width: none; 隐藏滚动条。这可能有一天会become a standard，但截至 2020 年，只有 Mozilla 的 implemented。
【讨论】：
@mon 的解决方案在某些情况下会中断（例如在表格单元格内），尽管它是一个很好的解决方案。然而，这个相似但更好：
Hide vertical scrollbar in <select> element, solution with margins
【讨论】：
现在这是一个相当古老的线程，但我想还有其他人会遇到它，以寻求与我一样的问题的答案。对于 Webkit 浏览器，有一个非常简单的解决方案，因为它们（Chrome 和 Safari）允许设置滚动条样式。
这里是您可以使用webkit scrollbars 做的许多事情的不错参考。你需要的 CSS 是
select::-webkit-scrollbar{width:1px;background-color:transparent}
诀窍本质上是做两件事
如果您希望它仅适用于选择滚动条的子集，您应该通过更改虚拟类的滚动条来更改 CSS
.subsel::-webkit-scrollbar{width:1px;background-color:transparent}
然后将该类用于您想要修改的选择。例如
<select class='subsel' id='selOne' size='4'>
<option value='1'>Option One</option>
<option value='2'>Option Two</option>
</select>
这是一个显示“已移除”滚动条的小提琴
【讨论】：
<div style="overflow: hidden;">
<select style="width: 110% ; border: 0px;">
.....
【讨论】：
试试这个：
<html>
<head>
<style>
div.border {
margin-right: 0px;
border-style:solid;
overflow:hidden;
}
select.hiddenscroll {
margin-right: -20px;
margin-top: -3px;
margin-bottom: -3px;
padding-right: -20px;
overflow:hidden;
}
</style>
</head>
<body>
<table>
<tr><td>
<div class="border" style="overflow:hidden;">
<select size="5" multiple="multiple" class="hiddenscroll" scrolling="no" seamless="seamless">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<table>
</tr></td>
</body>
</html>
【讨论】：
不是最好的解决方案，但应该可行:)
【讨论】：
我唯一能想到的就是通过在SELECT 滚动条的顶部放置一个图像或实体DIV 与更高的z-index 来重叠滚动条。但这将是一个丑陋的 hack。
【讨论】：
【讨论】：