Question

您好我选择了包含多个选项的框，我需要隐藏垂直滚动条，是否可以？

<select name="sCat" multiple="true">
<!-- My Option Here -->
</select>

Okey，但是我怎么能实现一个效果，我可以从列表中选择具有ID的项目，然后使用jQuery来管理这个id.click函数？我应该使用什么元素？

Answer 1

这是我们欣赏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>

Fiddle

Answer 2

我知道这个帖子有点陈旧，但是这里有很多非常苛刻的答案，所以我想提供一些更简单，更清洁的东西：

select {
    overflow-y: auto;
}

正如您在this fiddle中所看到的，如果您不知道您将拥有的选择选项的确切数量，此解决方案可为您提供灵活性。如果您不需要它而不隐藏其他情况下可能的额外选项元素，它会隐藏滚动条。不要做所有这些hacky重叠div的事情。它只会造成难以理解的标记。

Answer 3

不，您无法详细控制选择框的外观。

选择框通常显示为下拉列表，但没有任何内容表明它总是必须以这种方式显示。它的显示方式取决于系统，例如在某些手机上你根本没有下拉，而是一个覆盖大部分或全部屏幕的选择器。

如果要控制表单元素的详细外观，则必须使用常规HTML元素创建自己的表单控件（或找到已经完成此操作的其他人）。

Answer 4

如果您真的希望它消失，可以使用<div>覆盖滚动条虽然它不能在IE6上运行，但现代浏览器确实允许你在其上放置<div>。

Answer 5

Chrome（可能还有其他网络套件浏览器）：

＆＃13;

/* you probably want to specify the size if you're going to disable the scrollbar */
select[size]::-webkit-scrollbar {
	display: none;
}

＆＃13;

<select size=4>
  <option>Mango</option>
  <option>Peach</option>
  <option>Orange</option>
  <option>Banana</option>
</select>

＆＃13;

Answer 6

如果其他人遇到此问题，以供将来参考。我找到了一种适用于所有现代浏览器的解决方案：

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，因此不会显示。

Answer 7

我的跨浏览器.no-scroll代码段：

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

Answer 8

像Guffa所说，你无法可靠地控制本机控件。最好的方法可能是在每个项目旁边制作一个带有单选按钮的元素，然后使用标签和JavaScript使“行”交互，因此单击单选按钮或标签将为所选行着色。

Answer 9

更改填充底部，即可能是最简单的方法。

Answer 10

我制定了Arraxas解决方案：

展开框以包含所有元素
更改背景＆amp;悬停时的颜色
点击
点击

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>

Answer 11

我想你不能。 SELECT元素在CSS和HTML范围之外的地方呈现。它变灰了吗？

但您可以尝试添加“尺寸”属性。

隐藏<select>元素</select>中的垂直滚动条

11 个答案:

Fiddle