How to add vertical scroll in HTML DataList tag

ozil picture ozil · Jan 28, 2015 · Viewed 8.5k times · Source

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

Answer

rajesh picture rajesh · Jan 28, 2015

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.