How to add vertical scroll in HTML DataList tag

8.8k Views Asked by At

I have a datalist with lot of option, The list goes too long I want to give it vertical scroll.

<input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
<option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
<option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

Here the demo Problem
FIDDLE

1

There are 1 best solutions below

2
On

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 dropdownlist and set the list size as per your needs.