HTML datalist with a scrollbar

html html-datalist
D P. picture D P. · Jul 22, 2014 · Viewed 10k times · Source

I am using HTML and trying to make list as shown in the image before. However, by using datalist I can't get a scroll bar. Can you please tell me how can I enable scroll bar in datalist. (Note: can't use scripting language in my website to achieve this).

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Afghanistan">
  <option value="Aland Islands">
  <option value="Albania">
  <option value="Algeria">
  <option value="American Samoa">
  //Many more countries
  .
  .
  .
  <option value="Zcountry">
</datalist>

enter image description here

Answer

trai bui picture trai bui · Jul 24, 2014

How abbout this ? 

 <label for="country">Country:</label>
    <input type="text" id="country" list="country_list">
    <datalist id="country_list">
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <!-- more -->
    </datalist>

Related questions

HTML Form: Select-Option vs Datalist-Option

I was wondering what the differences are between Select-Option and Datalist-Option. Is there any situation in which it would be better to use one or the other? An example of each follows: Select-Option <select name="browser"> <option …

Read More
Show datalist labels but submit the actual value

Currently the HTML5 <datalist> element is supported in most major browsers (except Safari) and seems like an interesting way to add suggestions to an input. However, there seem to be some discrepancies between the implementation of the value …

Read More
Is there a way to apply a CSS style on HTML5 datalist options?

I would like to modify the way that the list of the different options of my datalist are displayed. Is it possible to apply on it some CSS properties ? <input list="languages" id="language_id"> <datalist id="…

Read More