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

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滚动条可以做的事情的参考.你需要的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>

这是一个小提琴,显示"已删除"滚动条的运行情况

Answer 3