blocks|key|841009|text|我想你不能。SELECT元素的呈现超出了CSS和HTML的范围。它是灰色的吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841010|但是你可以尝试添加一个"size“属性。|841011|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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

<p>But you can try to add a "size" atribute.</p>


blocks|key|841061|text|不，您不能如此详细地控制选择框的外观。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841062|选择框通常以下拉列表的形式显示，但并不是说它必须以这种方式显示。它的显示方式取决于系统，例如在一些手机上，你根本得不到下拉列表，而是一个覆盖大部分或全部屏幕的选择器。|841063|如果您想要控制表单元素在这些细节中的外观，您必须使用常规的HTML元素制作自己的表单控件(或者找其他已经这样做的人)。|841064|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

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

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

<p>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).</p>


blocks|key|841151|text|正如Guffa所说，你不能可靠地获得对本机控件的那么多控制。最好的方法可能是在每个项目旁边创建一个带有单选按钮的元素框，然后使用label和JavaScript来使“行”具有交互性，这样单击单选按钮或标签就会给所选行着色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841152|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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


blocks|key|841188|text|如果你真的想让滚动条消失，你可以使用<div>来覆盖它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|841189|尽管它不能在IE6上工作，但现代浏览器确实允许您在其上放置一个<div>。|841190|entityMap^0|I|5|0|V|5|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

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


blocks|key|841218|text|这就是我们欣赏CSS3所有功能的地方：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841219|​|841220|.bloc+{
++display:+inline-block;
++vertical-align:+top;
++overflow:+hidden;
++border:+solid+grey+1px;
}

.bloc+select+{
++padding:+10px;
++margin:+-5px+-20px+-5px+-5px;
}|code-block|syntax|javascript|841221|<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>|841222|841223|841224|Fiddle|offset|length|841225|841226|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/N8Brx/^0|0|0|0|0|0|0|0|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@$O|16|P|17|1|18]]|A|$]]|$1|Q|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>This is where we appreciate all the power of CSS3:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.bloc {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border: solid grey 1px;
}

.bloc select {
  padding: 10px;
  margin: -5px -20px -5px -5px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bloc"&gt;
  &lt;select name="year" size="5"&gt;
    &lt;option value="2010"&gt;2010&lt;/option&gt;
    &lt;option value="2011"&gt;2011&lt;/option&gt;
    &lt;option value="2012" SELECTED&gt;2012&lt;/option&gt;
    &lt;option value="2013"&gt;2013&lt;/option&gt;
    &lt;option value="2014"&gt;2014&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/N8Brx/" rel="nofollow noreferrer"><h2>Fiddle</h2></a></p>


blocks|key|1055968|text|更改填充底部，即可能是最简单的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1055969|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Change padding-bottom , i.e may be the simplest possible way . </p>


blocks|key|841305|text|我的跨浏览器.no-scroll代码片段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841306|​|841307|.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;}|code-block|syntax|javascript|841308|<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>|841309|841310|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>my cross-browser .no-scroll snippet:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select class="no-scroll" multiple="true"&gt;
	&lt;option value="2010" &gt;2010&lt;/option&gt;
	&lt;option value="2011" &gt;2011&lt;/option&gt;
	&lt;option value="2012" SELECTED&gt;2012&lt;/option&gt;
	&lt;option value="2013" &gt;2013&lt;/option&gt;
	&lt;option value="2014" &gt;2014&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1056040|text|我知道这个帖子有点老了，但这里有很多老生常谈的答案，所以我想提供一些更简单、更干净的东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1056041|select+{
++++overflow-y:+auto;
}|code-block|syntax|javascript|1056042|正如您在this+fiddle中看到的那样，如果您不知道将要使用的选择选项的确切数量，此解决方案为您提供了灵活性。它在你不需要的情况下隐藏了滚动条，而在其他情况下隐藏了可能的额外选项元素。不要做所有这些老生常谈的重叠div的事情。这只会造成不可读的标记。|offset|length|style|CODE|1056043|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/zc4omj6q/1/^0|0|0|30|3|4|B|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>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:</p>

<pre><code>select {
    overflow-y: auto;
}
</code></pre>

<p>As you can see in <a href="http://jsfiddle.net/zc4omj6q/1/">this fiddle</a>, 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 <code>div</code> stuff. It just makes for unreadable markup.</p>


blocks|key|841414|text|以备将来其他人遇到此问题时参考。我找到了一个可以在所有现代浏览器中运行的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841415|select{
++++scrollbar-width:+none;+/*For+Firefox*/;
++++-ms-overflow-style:+none;++/*For+Internet+Explorer+10%2B*/;
}

select:-webkit-scrollbar+{+/*For+WebKit+Browsers*/
++++width:+0;
++++height:+0;
}|code-block|syntax|javascript|841416|基本上这样，滚动条被设置为宽度0，因此不显示。|841417|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

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

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

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


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

<pre><code>&lt;select name="sCat" multiple="true"&gt;
&lt;!-- My Option Here --&gt;
&lt;/select&gt;
</code></pre>

<p>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?</p>


Hide vertical scrollbar in <select> element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

您好，我有多个选择的选择框，我需要隐藏垂直滚动条，可以吗？<select name="sCat" multiple="true"></select>好的，但是我如何才能达到这样的效果，我可以从列表中选择具有ID的项，然后使用jQuery来管理这个id.click函数呢？那么...

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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