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?

Answer 1

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