javascript - 带滚动条的输入框

Question

我创建了一个 input 字段，用户可以在其中输入他们想要搜索的任何内容。我还创建了一个下拉列表，但该列表超出了页面范围，只显示了很少的元素。

所以，我也想创建滚动条来轻松访问所有元素。代码如下所示，有将近 200 个元素。

提前谢谢你。

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>

Answer 1

请检查这个片段:

<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> 

你的情况有什么不同吗？

编辑这是我在 Firefox 中看到的

这是我在 Chrome 中看到的

编辑 2

据我所知，您目前无法设置 <datalist> 的样式标签。