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

您好,我的选择框有多个选择,我需要隐藏垂直滚动条,可以吗?

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

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

Stan asked 2019-11-07T13:45:34Z
10个解决方案
69 votes

这是我们欣赏CSS3强大功能的地方:

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

小提琴

Arraxas answered 2019-11-07T13:45:56Z
58 votes

我知道这个线程有些旧,但是这里有很多非常hacky的答案,所以我想提供更简单,更干净的东西:

select {
    overflow-y: auto;
}

如您所见,在您不知道选择选项的确切数目的情况下,此解决方案可为您提供灵活性。 在不需要滚动条的情况下,它会隐藏滚动条,而在另一种情况下,它会隐藏可能的额外选项元素。 不要做所有这些令人讨厌的重叠div的事情。 它只是造成了不可读的标记。

Mike Young answered 2019-11-07T13:46:28Z
23 votes

不,您不能如此详细地控制选择框的外观。

选择框通常显示为下拉列表,但是没有什么表明总是必须以这种方式显示。 显示方式取决于系统,例如在某些移动电话上,您根本不会看到下拉菜单,而是可以覆盖大部分或全部屏幕的选择器。

如果要控制表单元素如此详细的外观,则必须使用常规HTML元素(或者寻找其他已经做到这一点的人)来制作自己的表单控件。

Guffa answered 2019-11-07T13:47:10Z
4 votes

如果确实希望滚动条消失,则可以使用<div>覆盖滚动条。
尽管它在IE6上不起作用,但现代浏览器确实允许您在其顶部放置<div>

Derek 朕會功夫 answered 2019-11-07T13:47:49Z
2 votes

仅适用于Chrome(以及其他Webkit浏览器):

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

1j01 answered 2019-11-07T13:48:29Z
1 votes

我的跨浏览器.no-scroll片段:

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

fitorec answered 2019-11-07T13:49:06Z
0 votes

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

BoffinBrain answered 2019-11-07T13:49:32Z
0 votes

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

shashikant answered 2019-11-07T13:49:57Z
0 votes

我制定了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;
});
<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>
<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>

kofifus answered 2019-11-07T13:51:12Z
-1 votes

我想你做不到 SELECT元素的呈现超出CSS和HTML的范围。它变灰了吗?

但是您可以尝试添加“大小”属性。

Sebastjan answered 2019-11-07T13:51:59Z
translate from https://stackoverflow.com:/questions/4531269/hide-vertical-scrollbar-in-select-element