I have created an input field where users can type in whatever they want to search for. I have also created a drop down list but the list exceeds the page and only few items are shown.

So, I also wanted to create scroll bar to easily access all the items. The code looks like below and there are almost 200 items.

Thank you in advance.

body {
  background: #2196F3;
  font-family: "calibri", sans-serif;
  color: #FAFAFA;
  margin: 0;
}

#head {
  margin: 0;
  padding: 30px;
  text-align: center;
  border-bottom: 1px solid #1C2833;
}

.box {
  height: 30px;
  width: 250px;
  font-size: large;
  color: #17202A;
  border-radius: 5px;
  outline: none;
  border: none;
  padding: 12px;
}

<div>
  <p>
    <form id="form1">
      <input class="box" list="Country" name="Countries" placeholder=" Country">
      <datalist id="Country">
        <option value=" Afghanistan">
        <option value=" Albania">
        <option value=" Algeria">
        <option value=" American Samoa">
        <option value=" Andorra">
        <option value=" Angola">
        <option value=" Anguilla">
        <option value=" Antigua and Barbuda">
        <option value=" Argentina">
        <option value=" Armenia">
        <option value=" Aruba">
        <option value=" Australia">
        <option value=" Austria">
        <option value=" Azerbaijan">
        <option value=" Bahamas">
        <option value=" Bahrain">
        <option value=" Bangladesh">
        <option value=" Barbados">
        <option value=" Belarus">
        <option value=" Belgium">
        <option value=" Belize">
        <option value=" Benin">
        <option value=" Bermuda">
        <option value=" Bhutan">
        <option value=" Bolivia">
        <option value=" Bosnia and Herzegovina">
        <option value=" Botswana">
        <option value=" Brazil">
        <option value=" British Virgin Islands">
        <option value=" Brunei">
        <option value=" Bulgaria">
      </datalist>
    </form>
  </p>
</div>

I have created an input field where users can type in whatever they want to search for. I have also created a drop down list but the list exceeds the page and only few items are shown.

So, I also wanted to create scroll bar to easily access all the items. The code looks like below and there are almost 200 items.

Thank you in advance.

body {
  background: #2196F3;
  font-family: "calibri", sans-serif;
  color: #FAFAFA;
  margin: 0;
}

#head {
  margin: 0;
  padding: 30px;
  text-align: center;
  border-bottom: 1px solid #1C2833;
}

.box {
  height: 30px;
  width: 250px;
  font-size: large;
  color: #17202A;
  border-radius: 5px;
  outline: none;
  border: none;
  padding: 12px;
}

<div>
  <p>
    <form id="form1">
      <input class="box" list="Country" name="Countries" placeholder=" Country">
      <datalist id="Country">
        <option value=" Afghanistan">
        <option value=" Albania">
        <option value=" Algeria">
        <option value=" American Samoa">
        <option value=" Andorra">
        <option value=" Angola">
        <option value=" Anguilla">
        <option value=" Antigua and Barbuda">
        <option value=" Argentina">
        <option value=" Armenia">
        <option value=" Aruba">
        <option value=" Australia">
        <option value=" Austria">
        <option value=" Azerbaijan">
        <option value=" Bahamas">
        <option value=" Bahrain">
        <option value=" Bangladesh">
        <option value=" Barbados">
        <option value=" Belarus">
        <option value=" Belgium">
        <option value=" Belize">
        <option value=" Benin">
        <option value=" Bermuda">
        <option value=" Bhutan">
        <option value=" Bolivia">
        <option value=" Bosnia and Herzegovina">
        <option value=" Botswana">
        <option value=" Brazil">
        <option value=" British Virgin Islands">
        <option value=" Brunei">
        <option value=" Bulgaria">
      </datalist>
    </form>
  </p>
</div>

• javascript
• html
• css

• 1 Need to try and format your code better here, also can you show the CSS you currently have? The CSS overflow property will automatically add a scroll bar if the content overflows an element's box. – cela Commented Jul 24, 2017 at 18:40
• 2 By default a datalist provides a scrollbar. Is your CSS affecting something? – Vivek Jain Commented Jul 24, 2017 at 18:42
• 1 Possible duplicate of Scroll bar for Datalist in HTML5 – Muhammad Commented Jul 24, 2017 at 18:48

3 Answers 3

Please, check this snippet:

<form action="somepage.php" method="get">
	<input list="Country" name="Country">
	<datalist id="Country">
		<option value=" Afghanistan">
		<option value=" Albania">
		<option value=" Algeria">
		<option value=" American Samoa">
		<option value=" Andorra">
		<option value=" Angola">
		<option value=" Anguilla">
		<option value=" Antigua and Barbuda">
		<option value=" Argentina">
		<option value=" Armenia">
		<option value=" Aruba">
		<option value=" Australia">
		<option value=" Austria">
		<option value=" Azerbaijan">
		<option value=" Bahamas">
		<option value=" Bahrain">
		<option value=" Bangladesh">
		<option value=" Barbados">
		<option value=" Belarus">
		<option value=" Belgium">
		<option value=" Belize">
		<option value=" Benin">
		<option value=" Bermuda">
		<option value=" Bhutan">
		<option value=" Bolivia">
		<option value=" Bosnia and Herzegovina">
		<option value=" Botswana">
		<option value=" Brazil">
		<option value=" British Virgin Islands">
		<option value=" Brunei">
		<option value=" Bulgaria">
	</datalist>
	<input type="submit">
</form> 

There's something different in your case?

EDIT This is what I see in Firefox

This is what I see in Chrome

EDIT 2

From my knowledge, you currently can't style the <datalist> tag.

It is not possible to change the height of an option you can only change the font size of option

  #country option{ font-size:5px}

check this for more informationa link

Try this:

#country option {
  overflow:scroll;
 }

try without and with option, not sure how that will make a difference.