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

Hide vertical scrollbar in <select> element

提问by Stan

Hello I have select box with multiple choices and I need to hide the vertical scrollbar, is it possible?

您好，我有多个选项的选择框，我需要隐藏垂直滚动条，这可能吗？

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

Okey, but how then I can achieve an effect where I can select item from list that has ID and then use jQuery to manage this id.click functions? What element I should use then?

好的，但是我如何才能实现可以从具有 ID 的列表中选择项目然后使用 jQuery 管理此 id.click 功能的效果？那我应该使用什么元素？

回答by Mike Young

I know this thread is somewhat old, but there are a lot of really hacky answers on here, so I'd like to provide something that is a lot simpler and a lot cleaner:

我知道这个线程有点旧，但是这里有很多非常老套的答案，所以我想提供一些更简单和更清晰的东西：

select {
    overflow-y: auto;
}

As you can see in this fiddle, this solution provides you with flexibility if you don't know the exact number of select options you are going to have. It hides the scrollbar in the case that you don't need it without hiding possible extra option elements in the other case. Don't do all this hacky overlapping divstuff. It just makes for unreadable markup.

正如您在此小提琴中所见，如果您不知道将要拥有的选择选项的确切数量，则此解决方案为您提供了灵活性。它会在您不需要滚动条的情况下隐藏滚动条，而在其他情况下不会隐藏可能的额外选项元素。不要做所有这些hacky重叠的div东西。它只会产生不可读的标记。

回答by Arraxas

This is where we appreciate all the power of CSS3:

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

小提琴

回答by Guffa

No, you can't control the look of a select box in such detail.

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

A select box is usually displayed as a dropdown list, but there is nothing that says that it always has to be displayed that way. How it is displayed depends on the system, and on some mobile phones for example you don't get a dropdown at all, but a selector that covers most or all of the screen.

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

If you want to control how your form elements look in such detail, you have to make your own form controls out of regular HTML elements (or find someone else who has already done that).

如果你想控制你的表单元素看起来如此详细，你必须用常规的 HTML 元素制作你自己的表单控件（或者找其他人已经这样做了）。

回答by u283863

You can use a <div>to cover the scrollbar if you really want it to disappear.
Although it won't work on IE6, modern browsers do let you put a <div>on top of it.

<div>如果你真的想让它消失，你可以使用 a来覆盖滚动条。
虽然它不能在 IE6 上运行，但现代浏览器确实让你<div>在它上面放了一个。

回答by 1j01

Chrome (and maybe other webkit browsers) only:

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

回答by fitorec

my cross-browser .no-scroll snippet:

我的跨浏览器 .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>

回答by qwertz

For future reference if somebody else runs into this problem. I found a solution that should work in all modern browsers:

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

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

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

Basically this way the scrollbar is set to a width of 0 and is hence not displayed.

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

回答by kofifus

I worked out Arraxas solution to:

我制定了 Arraxas 解决方案：

• expand the box to include all elements

• change background & color on hover

• get and alert value on click

• do not keep highlighting selection after clicking

• 展开框以包含所有元素

• 悬停时更改背景和颜色

• 单击时获取和警报值

• 单击后不要继续突出显示选择

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>

回答by shashikant

Change padding-bottom , i.e may be the simplest possible way .

更改 padding-bottom ，即可能是最简单的方法。

回答by BoffinBrain

Like Guffa said, you cannot reliably get that much control over native controls. The best way is probably to make a box of elements with radio buttons beside each item, then use labels and JavaScript to make the 'rows' interactive, so clicking on a radio button or label will color the selected row.

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