How to apply scrollbar for datalist?

Question

I have a datalist for autocomplete.

How can I apply scrollbar to it?

My HTML code:

<input list="languages" id="language_id" />
<datalist id="languages" style="visibility:hidden;white-space:nowrap;overflow:scroll;">
  <option value="html">HTML</option>
  <option value="java">Java</option>
  <option value="perl">Perl</option>
  <option value="php">PHP</option>
  <option value="ruby-on-rails">Ruby on Rails</option>
</datalist>

And also when I double click on textbox all the words are displaying. How can I hide all the words displaying while double clicking?

Possible duplicate of [Scroll bar for Datalist in HTML5](https://stackoverflow.com/questions/23042745/scroll-bar-for-datalist-in-html5) — Pedro Camara Junior, Jun 23 '17 at 20:50

score 1 · Answer 1 · answered May 24 '14 at 21:39

1

with Javascript can make scrollbar, and you can use single click for show items on datalist after focus.

answered May 24 '14 at 21:39

Mo Mirmousavi

1,035
1
7
13

score 0 · Answer 2 · answered Apr 18 '16 at 09:39

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.

How to apply scrollbar for datalist?

2 Answers2