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

hgb9j2n6 于 2023-05-12 发布在其他

关注(0)|答案(4)|浏览(183)

我正在使用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>

Html

来源：https://stackoverflow.com/questions/43491711/how-to-give-scrolling-effect-in-datalist-dropdown

4条答案

按热度按时间

92dk7w1h1#

试试这个

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

赞(0）回复(0）举报 2023-05-12

ymzxtsji2#

这个简单的方法对我很有效：

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

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

赞(0）回复(0）举报 2023-05-12

1aaf6o9v3#

一般来说，你不能。此元素是“替换元素”的一个示例，这些元素依赖于操作系统，并且不是HTML/浏览器的一部分。它不能通过CSS样式化。
相反，你可以使用引导下拉菜单或任何其他插件。
我已经使用了bootstrap，你可以相应地调整高度，例如

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

jsfiddle link

赞(0）回复(0）举报 2023-05-12

tct7dpnv4#

试试这个：

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

赞(0）回复(0）举报 2023-05-12

我来回答

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

4条答案

相关问题

热门标签

最新问答