带有滚动条的输入字段答案

【问题标题】：Input field with scrollbar带有滚动条的输入字段
【发布时间】：2017-07-24 18:36:07
【问题描述】：

我创建了一个输入字段，用户可以在其中输入他们想要搜索的任何内容。我还创建了一个下拉列表，但问题是下拉列表超出了页面并且只显示了几个项目。所以，我还想创建滚动条来轻松访问所有项目。 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;

}

【问题讨论】：

需要在这里尝试更好地格式化您的代码，您还可以展示您当前拥有的 CSS 吗？如果内容溢出元素的框，CSS 溢出属性会自动添加滚动条。
默认情况下，datalist 提供滚动条。你的 CSS 有影响吗？
Scroll bar for Datalist in HTML5的可能重复

标签： javascript html css

【解决方案1】：

请检查这个sn-p：

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

【讨论】：

他的问题是它不会添加滚动条来遍历每个国家/地区，列表很可能会填满整个页面。这个也没有。这在 Mozilla 中很奇怪，没有下拉菜单。在 Chrome 中，有一个下拉菜单但没有滚动条。
我理解并相信目前不可能做到这一点...为什么不试试 Combobox？
是的，我想在 chrome 中实现完全相同的东西，就像在 Firefox 中显示的那样。

【解决方案2】：

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

  #country option{ font-size:5px}

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

【讨论】：

【解决方案3】：

试试这个：

#country option {
  overflow:scroll;
 }

尝试不带和带选项，不知道会有什么不同。

【讨论】：