HTML5中的Datalist的滚动条 [英] Scroll bar for Datalist in HTML5

问题描述

我在HTML5中的 datalist 遇到麻烦，我有10000行显示在我的选项值，我因为某种原因我看不到任何滚动条，我试过 overflow：scroll 设置 height 和 width ，但没有帮助。请帮助我！

I am having trouble with datalist in HTML5, i have 10000 rows to display in my option values, I am populating from mysql using PHP, for some reason I can't see any scrollbar, i tried overflow:scroll setting height and width but no help. Please help me!

<div class="container">
    <form action="NutritionDataBank.php" method="post">
        <label>Select NDBNum:</label>
        <input list="ndbnum" id="ndb" placeholder="e.g.1001" size="20" multiple>

        <datalist id="ndbnum">
            <?php
                //...                               
                while($row = mysqli_fetch_array($result)){
                   echo "<option value=$row[ndbNum]></option>"; 
                }
            ?>
        </datalist>
    </form>
</div>

推荐答案

属性。数据列表目前不支持任何CSS样式，并且特定的视觉特性是特定于浏览器的。某些浏览器可能会选择为长列表添加滚动条。

Unfortunately, there's not much you can do with the datalist attribute. The datalist does not currently support any CSS styling, and specific visual characteristics are browser-specific. Some browsers may choose to add scrollbars for long lists.

如果这不可接受，您可能必须忘记datalist并通过Javascript实现ComboBox。我相信JQuery有一个自动完成功能，可能是适当的。

If this isn't acceptable, you may have to forget the datalist and implement a ComboBox via Javascript. I believe JQuery has an autocomplete function that may be appropriate.

这篇关于HTML5中的Datalist的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！