Question

这个问题看起来很简单（overflow:hidden，对吧？），直到我无法解决。我有一个定义大小的简单多行SELECT：

<select size="10" name="elements">
... 
</select>

MSIE和Opera仅在需要时显示垂直滚动条，但Firefox和Chrome 始终显示处于禁用状态的垂直滚动条。

我尝试设置overflow，overflow-y，甚至overflow-x，但没有任何效果。有什么想法吗？

Answer 1

<div style="overflow: hidden;">
<select style="width: 110% ; border: 0px;">
.....

Answer 2

现在这是一个相当古老的线索，但我想有其他人在试图回答同一个问题时遇到它，就像我一样。对于Webkit浏览器，有一个非常简单的解决方案，因为他们（Chrome和Safari）允许滚动条的样式。

对于webkit scrollbars可以做的许多事情，这是一个不错的参考。你需要的CSS是

select::-webkit-scrollbar{width:1px;background-color:transparent}

诀窍基本上是做两件事

使滚动条只有一个像素宽，因此不会妨碍
将其背景颜色设置为transprent

如果您希望仅对选定滚动条的子集起作用，则应通过更改虚拟类的滚动条来更改CSS

.subsel::-webkit-scrollbar{width:1px;background-color:transparent}

然后将该类用于您想要修改的选择。 e.g。

<select class='subsel' id='selOne' size='4'>
 <option value='1'>Option One</option>
 <option value='2'>Option Two</option>
</select>

这是一个小提示，显示“已删除”滚动条的操作

rememebr it will only work with Webkit browsers!

Answer 3

你显然不能：http://www.webdeveloper.com/forum/showthread.php?t=154496

Answer 4

你可以，using some JavaScript

不是最好的解决方案，但应该有效：）

Answer 5

试试这个：

<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>

Answer 6

在Chrome中，overflow: hidden可以正常工作。

在Firefox中，您当前可以使用scrollbar-width: none;隐藏滚动条。可能有一天become a standard，但截至2020年，只有implemented来自Mozilla。

Answer 7

来自@mon的解决方案在某些情况下会中断（例如在表格单元格内部），尽管这是一个很好的解决方案。然而，这个相似但更好：

<强> Hide vertical scrollbar in <select> element, solution with margins

Answer 8

我唯一能想到的是通过在DIV滚动条顶部右侧放置一个更高的z-index图像或实体SELECT来重叠滚动条。但这将是一个丑陋的黑客。

在Firefox和Chrome中隐藏多行SELECT的垂直滚动条？

8 个答案: