在<select>元素中隐藏垂直滚动条
你好，我有多个select的select框，我需要隐藏垂直滚动条，这可能吗？
<select name="sCat" multiple="true"> <!-- My Option Here --> </select> Okey，但是我怎么能达到一个效果，我可以从列表中select具有ID的项目，然后使用jQuery来pipe理这个id.click函数？ 我应该用什么元素呢？
这是我们欣赏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>
小提琴
我知道这个线程有点旧了，但是在这里有很多真正的hacky答案，所以我想提供一个更简单，更清洁的东西：
select { overflow-y: auto; }
正如你可以在这个小提琴中看到的，这个解决scheme为你提供了灵活性，如果你不知道你将有的select选项的确切数量。 它隐藏了滚动条的情况下，你不需要它隐藏在其他情况下可能的额外选项元素。 不要做所有这些哈克重叠的东西。 这只会导致不可读的标记。
不，你无法控制这个细节的select框的外观。
select框通常显示为下拉列表，但没有任何说明必须以这种方式显示。 它的显示方式取决于系统，在一些手机上，例如你根本没有下拉菜单，而是一个覆盖大部分或全部屏幕的select器。
如果你想控制你的表单元素在如此细节中的外观，你必须从常规的HTML元素中创build自己的表单控件（或者find已经完成的其他人）。
如果您真的希望它消失，您可以使用<div>来覆盖滚动条。
虽然它不能在IE6上工作，现代浏览器确实让你把一个<div>放在上面。
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>
我的跨浏览器.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>
就像Guffa说的那样，你不能可靠地控制本地控制。 最好的方法可能是在每个项目旁边用单选button制作一个元素盒子，然后使用标签和JavaScript使“行”交互，因此单击单选button或标签将为选定的行着色。
改变填充底部，即可能是最简单的方法。
我制定了Arraxas解决scheme：
-
展开框以包含所有元素
-
更改hover的背景和颜色
-
点击获取并警示值
-
点击后不要突出显示select
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>
我想你不能。 SELECT元素呈现在CSS和HTML无法触及的地方。 它变灰了吗？
但是你可以尝试添加一个“大小”的属性。
