在Firefox和Chrome中隐藏多行选择的垂直滚动条？_Firefox_Select_Google Chrome_Scrollbar

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

firefox select google-chrome

在Firefox和Chrome中隐藏多行选择的垂直滚动条？,firefox,select,google-chrome,scrollbar,Firefox,Select,Google Chrome,Scrollbar,这个问题看起来很简单（overflow:hidden，对吗？）。我有一个定义大小的简单多行选择： <select size="10" name="elements"> ... </select> ... MSIE和Opera仅在需要时显示垂直滚动条，而Firefox和Chrome总是在禁用状态下显示垂直滚动条我尝试设置overflow、overflow-y，甚至overflow-x，但都没有效果。有什么想法吗？显然，你不能：我能想到的唯一一件事就是通过在选择滚

这个问题看起来很简单（

overflow:hidden

，对吗？）。我有一个定义大小的简单多行选择：

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

...

MSIE和Opera仅在需要时显示垂直滚动条，而Firefox和Chrome总是在禁用状态下显示垂直滚动条

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

显然，你不能：

我能想到的唯一一件事就是通过在

选择滚动条顶部放置一个z索引更高的图像或实体DIV
来重叠滚动条。但这将是一个丑陋的黑客行为。
你可以
不是最好的解决方案，但应该有效：）
尝试以下方法：
<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>


分区边界{
右边距：0px；
边框样式：实心；
溢出：隐藏；
}
选择.hiddenscroll{
右边距：-20px；
利润上限：-3px；
利润底部：-3px；
右侧填充：-20px；
溢出：隐藏；
}
选择1
选择2
选择3
选择4
备选案文5

.....
这是一条相当古老的线索，但我想，也有其他人在寻找与我相同的问题的答案时遇到了这条线索。对于Webkit浏览器，有一个非常简单的解决方案，因为它们（Chrome和Safari）允许对滚动条进行样式设置
这里是一个不错的参考，你可以做很多事情。这里需要的CSS是
select::-webkit-scrollbar{width:1px;background-color:transparent}

关键在于做两件事
使滚动条只有一个像素宽，这样它就不会碍事
将其背景色设置为“透明”
如果您希望它只适用于选择滚动条的子集，那么您应该通过更改虚拟类的滚动条来更改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>


选择一
选择二

这是一个小提琴，显示了“删除”滚动条的作用
来自@mon的解决方案在某些情况下会中断（例如在表格单元格内），尽管这是一个很好的解决方案。然而，这一个类似但更好：
在Chrome中，溢出：隐藏
工作正常
在Firefox中，您当前可以使用滚动条宽度：无
隐藏滚动条。这可能有一天会发生，但到2020年，只有Mozilla才这样做。似乎是真的，不幸的是。简要描述一下OP问题的解决方案会更好。请阅读：
<select class='subsel' id='selOne' size='4'>
 <option value='1'>Option One</option>
 <option value='2'>Option Two</option>
</select>