您好，我有多个选择框，我需要隐藏垂直滚动条，可以吗？
<select name="sCat" multiple="true">
<!-- My Option Here -->
</select>
好吧，但是我怎样才能实现从具有 ID 的列表中选择项目然后使用 jQuery 来管理这个 id.click 函数的效果呢？那我应该使用什么元素呢？
【问题讨论】：
我知道这个帖子有点老了，但是这里有很多非常老套的答案，所以我想提供一些更简单、更干净的东西：
select {
overflow-y: auto;
}
正如您在this fiddle 中看到的那样，如果您不知道您将拥有的选择选项的确切数量，此解决方案可为您提供灵活性。它在您不需要滚动条的情况下隐藏滚动条，而在另一种情况下隐藏可能的额外选项元素。不要做所有这些 hacky 重叠 div 的东西。它只会造成不可读的标记。
【讨论】：
这就是我们欣赏 CSS3 的所有力量的地方：
.bloc {
display: inline-block;
vertical-align: top;
overflow: hidden;
border: solid grey 1px;
}
.bloc select {
padding: 10px;
margin: -5px -20px -5px -5px;
}<div class="bloc">
<select name="year" size="5">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012" SELECTED>2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</div>【讨论】：
This is where we appreciate all the power of CSS3。谁能告诉我 CSS3 在哪里？
不，您无法如此详细地控制选择框的外观。
选择框通常显示为下拉列表，但没有任何内容表明它必须始终以这种方式显示。它的显示方式取决于系统，例如在某些手机上，您根本看不到下拉菜单，而是覆盖大部分或全部屏幕的选择器。
如果您想控制表单元素的外观如此详细，您必须使用常规 HTML 元素制作自己的表单控件（或找到其他已经这样做的人）。
【讨论】：
如果其他人遇到此问题，以供将来参考。 我找到了一个适用于所有现代浏览器的解决方案：
select{
scrollbar-width: none; /*For Firefox*/;
-ms-overflow-style: none; /*For Internet Explorer 10+*/;
}
select:-webkit-scrollbar { /*For WebKit Browsers*/
width: 0;
height: 0;
}
基本上这样滚动条被设置为宽度为0，因此不显示。
【讨论】：
如果您真的希望滚动条消失，您可以使用<div> 覆盖滚动条。
虽然它不能在 IE6 上运行，但现代浏览器确实允许您在其上放置 <div>。
【讨论】：
仅限 Chrome（可能还有其他 webkit 浏览器）：
/* you probably want to specify the size if you're going to disable the scrollbar */
select[size]::-webkit-scrollbar {
display: none;
}<select size=4>
<option>Mango</option>
<option>Peach</option>
<option>Orange</option>
<option>Banana</option>
</select>【讨论】：
我的跨浏览器 .no-scroll sn-p:
.no-scroll::-webkit-scrollbar {display:none;}
.no-scroll::-moz-scrollbar {display:none;}
.no-scroll::-o-scrollbar {display:none;}
.no-scroll::-google-ms-scrollbar {display:none;}
.no-scroll::-khtml-scrollbar {display:none;}<select class="no-scroll" multiple="true">
<option value="2010" >2010</option>
<option value="2011" >2011</option>
<option value="2012" SELECTED>2012</option>
<option value="2013" >2013</option>
<option value="2014" >2014</option>
</select>【讨论】：
就像 Guffa 所说，您无法可靠地控制原生控件。最好的方法可能是在每个项目旁边制作一个带有单选按钮的元素框，然后使用标签和 JavaScript 使“行”具有交互性，因此单击单选按钮或标签将为选定的行着色。
【讨论】：
更改 padding-bottom ，即可能是最简单的方法。
【讨论】：
我制定了 Arraxas 解决方案：
扩展框以包含所有元素
悬停时更改背景和颜色
点击时获取和提醒值
点击后不要一直高亮选择
let selElem=document.getElementById('myselect').children[0];
selElem.size=selElem.length;
selElem.value=-1;
selElem.addEventListener('change', e => {
alert(e.target.value);
e.target.value=-1;
});#myselect {
display:inline-block; overflow:hidden; border:solid black 1px;
}
#myselect > select {
padding:10px; margin:-5px -20px -5px -5px;";
}
#myselect > select > option:hover {
box-shadow: 0 0 10px 100px #4A8CF7 inset; color: white;
}<div id="myselect">
<select>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div>【讨论】：
我认为你不能。 SELECT 元素呈现在 CSS 和 HTML 范围之外的位置。 是不是变灰了？
但您可以尝试添加“大小”属性。
【讨论】：