Question

我正在使用HTML datalist来显示各种职业路径，但我的选项数量太长。我想给它一个滚动效果。我已经搜索过了，但我发现只有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

通常，您不能。此元素是“已替换元素”的示例，它们与OS相关，并且不属于HTML /浏览器。无法通过CSS设置样式。

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

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

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

jsfiddle link

Answer 2

试试这个

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

试试这个：

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

如何在datalist下拉列表中给出滚动效果？

3 个答案: