如何在datalist下拉列表中给出滚动效果？ [英] How to give scrolling effect in datalist dropdown?

问题描述

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

I am using HTML datalist to show various career paths but my number of options is too long . I wish to give it a scrolling effect. I have searched for it but only thing I found was CSS cannot be applied on datalist. Is it possible to apply styles on datalist using jQuery?

这是我的HTML标记：

Here is my HTML markup:

<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>

推荐答案

试试这个：

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

这篇关于如何在datalist下拉列表中给出滚动效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！