如何在<select> </select>中隐藏滚动条

Question

我有在标签中隐藏垂直滚动条的问题。

这是我的代码：

<select size="3" style="-webkit-appearance: listbox; height:150px; width:200px; align-items: flex-start;">
  <option>abc</option>
  <option>def</option>
  <option>ght</option>
</select>

我尝试使用overflow: hidden\auto或设置<select size="20">或更高版本，但这对我没有帮助。

是否有可能以某种方式隐藏Chrome中的滚动条？

NB！ IE中没有滚动条。

Answer 1

你可以试试这个：

<div class="scroll">
<select size="3" style="-webkit-appearance: listbox; height:150px; width:200px; align-items: flex-start;">
  <option>abc</option>
  <option>def</option>
  <option>ght</option>
</select>
</div>
<style>
 .scroll { display:inline-block; vertical-align:top; overflow:hidden; border:solid grey 1px; }
 .scroll select { padding:10px; margin:-5px -20px -5px -5px; }
</style>

Answer 2

这是使用CSS3

＆＃13;

＆＃13;

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

＆＃13;

<div class="conatainer">
  <select name="year" size="3">
    <option>abc</option>
    <option>def</option>
    <option>ght</option>
  </select>
</div>

＆＃13;

＆＃13;

＆＃13;

或者您可以使用

Webkit Scrollbar Tricks