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

Question

您好我选择了多个选项框,我需要隐藏垂直滚动条,是否可能？

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

好吧,但是我怎么能实现一个效果,我可以从列表中选择具有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;
}

小提琴

Answer 2

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

select {
    overflow-y: auto;
}

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

Answer 3

不,您无法详细控制选择框的外观.

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

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

Answer 4

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

select{
    scrollbar-width: none; /*For Firefox*/;
    -ms-overflow-style: none;  /*For Internet Explorer 10+*/;
}

select::-webkit-scrollbar { /*For WebKit Browsers*/
    width: 0;
}

基本上这样滚动条的宽度被设置为 0，因此不会显示。

Answer 5

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