如何在数据列表下拉列表中提供滚动效果？

Question

我正在使用 HTML 数据列表来显示各种职业道路，但我的选择数量太长了。我想给它一个滚动效果。我已经搜索过了，但我唯一发现的是 CSS 不能应用于数据列表。是否可以使用 jQuery 在数据列表上应用样式？

这是我的 HTML 标记：

 <input class="form-control searchbar" #input (input)="filterdata(input.value)" [(ngModel)]="homesearch" id="home_ssearch" name="careerr" list="careers" placeholder="Discover more about any career you like" />
<div>
        <datalist class="datalist" id="careers" >
          <option *ngFor = "let career of carrerpathList" value="{{career.title}}" ></option>
        </datalist>
</div>

原文由 Utkarsh Gautam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一般来说，你不能。此元素是“替换元素”的示例，这些元素依赖于操作系统并且不是 HTML/浏览器的一部分。它不能通过 CSS 设置样式。

相反，您可以使用 bootstrap 下拉列表或任何其他插件。

我为此使用了引导程序，您可以相应地调整高度，例如，

 .dropdown-menu {
  max-height: 150px;
  overflow-y: auto;
}

jsfiddle链接

原文由 Arham Chowdhury 发布，翻译遵循 CC BY-SA 4.0 许可协议