带滚动条的输入字段

Question

我创建了一个输入字段，用户可以输入他们想要搜索的内容。我还创建了一个下拉列表，但问题是下拉列表超出了页面，只显示了几个项目。所以，我还想创建滚动条以轻松访问所有项目。 HTML代码是这样的，有近200项。 提前谢谢。

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

css代码：

 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;

}

Answer 1

无法更改选项的高度，只能更改选项的字体大小

  #country option{ font-size:5px}

查看这里了解更多信息a link

Answer 2

试试这个：

#country option {
  overflow:scroll;
 }

尝试没有和有选项，不知道这将如何产生影响。

Answer 3

请检查此代码段：

<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>标记的样式。