html - 如何仅在 HTML 的底部输入中显示数据列表

标签 html css select datalist

我在数据列表中使用了一个选择。但我有一个问题。当我的数据列表显示在输入的顶部时,我无法在我的数据列表中滚动。但是当数据列表在底部时不会发生。 这是我的代码:

<input type="search" placeholder="{{'COMPONENT_PROPERTIES.SEARCH_ICON' | translate}}"
               ng-model="icon.name"
               list="classIcon"
               id="searchIcon"
               ng-change="changeFn(icon.name)">
        <datalist id="classIcon" class="scroll" >
            <select class="selectIcon">
                <option ng-repeat="icon in classService.classesAwesome  "
                        value="{{icon}}"
                        ng-bind-html="icon | highlight: $parent.icon.name ">
                    <i class="{{icon}}"></i> &nbsp;
                    <span ng-bind-html="icon | highlight: $parent.icon.name "></span>
                </option>
            </select>
        </datalist>

in the bottom

in the top

最佳答案

您应该将此代码添加到您的 CSS。

.dropdown1 {
width:290px;
overflow:scroll;
height: 20px;
}

关于html - 如何仅在 HTML 的底部输入中显示数据列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46318766/

相关文章:

mysql - 优化 join/union sql?

javascript - 访问 session 值

javascript - 使 div 表现得像 iframe

javascript - jQuery 在单击时获取数据属性不起作用

jquery - CKEditor 将 css 应用于对话框 html 元素内容

php - Mysql - 从多个表中选择而不产生重复数据

javascript - 将列表显示为环形缓冲区

CSS 问题 : Footer overlapping with above content

html - 如何将 div 与 flex 对齐

jquery - 用jquery选择显示文本框?