Question

我一直在寻找从HTML中删除垂直滚动条的方法。在附加的jsFiddle中，如果省略size值，则不是滚动条。如果size = 6或size = 7，则有一个垂直滚动条。我找到了几个建议的解决方案，但似乎都没有。有没有人有办法解决吗？ .hideoverflow { 溢出：隐藏; } ＆lt; div class =“hideoverflow”＆gt; ＆lt; select size =“7”＆gt; ＆lt; option id =“A”＆gt; A＆lt; / option＆gt; ＆lt; option id =“B”＆gt; B＆lt; / option＆gt; ＆lt; option id =“C”＆gt; C .....＆lt; / option＆gt; ＆lt; option id =“D”＆gt; D＆lt; / option＆gt; ＆lt; option id =“E”＆gt; E＆lt; / option＆gt; ＆lt; option id =“F”＆gt; F＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; / DIV＆GT;

Answer 1

您仍然无法直接设置＆lt; select＆gt;的样式。 CSS中的元素。这是一个已知的问题，在这个稍微过时的MDN article中描述过。

但是，您可以使用显示黑客来实现类似的效果。有关类似问题，请参阅Arraxas' answer。我已经接受了他们的回答并对其进行了更改以反映您的代码。

＆＃13;

.hideoverflow {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border: solid #DCDFE3 1px
}
.hideoverflow select {
  padding: 4px;
  margin: -5px -20px -5px -5px;
}

＆＃13;

<div class="hideoverflow">
  <select size="7">
    <option id="A">A</option>
    <option id="B">B</option>
    <option id="C">C.....</option>
    <option id="D">D</option>
    <option id="E">E</option>
    <option id="F">F</option>
  </select>
</div>

＆＃13;

如何删除<select>垂直滚动条

1 个答案: