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

Question

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

这是我的 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>

Answer 1

试试这个

.scrollable {
  overflow-y: auto !important;  // Use !important only if there is already an overflow style rule for this element and you want to override
}

然后像这样应用它：

<datalist class="datalist scrollable" id="careers" >
     <option *ngFor = "let career of carrerpathList" value="{{career.title}}" ></option>         
</datalist>

希望对您有所帮助！ ;)

更新 1：

我讨厌内联样式，但让我们试试看<datalist> 是否接受样式。试试这个：

<datalist class="datalist scrollable" id="careers" style="overflow-y: auto!important">

Answer 2

这个简单的方法对我有用：

datalist {
    max-height: 500px;
    overflow-y: auto;
}

注意：此 CSS 会将滚动效果应用于所有 <datalist>

Answer 3

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

相反，您可以使用引导下拉菜单或任何其他插件。

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

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

jsfiddle link

Answer 4

试试这个：

.datalist {
   height:50px !important;
   max-height:80px !important;
   overflow-y:auto;
   display:block !important;
}