在元素中隐藏垂直滚动条

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?

Okey，但是如何才能达到这样的效果呢?我可以从有ID的列表中选择项目，然后使用jQuery来管理这个id.click函数?那么我应该使用什么元素呢?

10 个解决方案

#1

This is where we appreciate all the power of CSS3

这是我们欣赏CSS3的所有力量的地方

<style>
 .bloc { display:inline-block; vertical-align:top; overflow:hidden; border:solid grey 1px; }
 .bloc select { padding:10px; margin:-5px -20px -5px -5px; }
</style>

<!-- Années -->
<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

#2

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 div stuff. It just makes for unreadable markup.

正如您在这个小提琴中看到的，如果您不知道您将拥有的选择选项的确切数量，这个解决方案将为您提供灵活性。如果您不需要滚动条，它将隐藏另一种情况下可能的额外选项元素。不要做所有这些繁琐的重叠的div。它只会产生不可读的标记。

#3

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元素(或者找到已经这样做的其他人)创建自己的表单控件。

#4

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.

如果您真的希望滚动条消失，您可以使用

来覆盖它。虽然它不能在IE6上工作，但是现代浏览器确实允许在它上面加上

。

#5

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>

#6

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>

#7

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使“行”具有交互性，因此单击单选按钮或标签会给选定的行上色。

#8

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

改变padding-bottom,我。e可能是最简单的方法。

#9

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>

#10

I think you can't. The SELECT element is rendered at a point beyond the reach of CSS and HTML. Is it grayed out?

我认为你不能。SELECT元素在CSS和HTML无法到达的地方呈现。它是灰色的吗?

But you can try to add a "size" atribute.

但是你可以尝试添加一个“大小”的心房肌。