php - Scroll bar for Datalist in HTML5

Question

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>

Answer 1

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.

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.