带滚动条的输入字段

问题描述：

我已经创建了一个输入字段，用户可以在其中输入任何他们想要搜索的内容。我也创建了一个下拉列表，但问题是下拉列表超出了页面，只显示了几个项目。所以，我也想创建滚动条来轻松访问所有的项目。该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溢出属性将自动添加滚动条。 – Alec

默认情况下'datalist'提供一个滚动条。你的CSS影响了什么？ –

[HTML5中的Datalist的滚动条]的可能重复（https://stackoverflow.com/questions/23042745/scroll-bar-for-datalist-in-html5） – Muhammad

答

试试这个：

#country option { 
    overflow:scroll; 
}

尝试没有与选项，不知道如何将有所作为。

我已经使用了溢出标记，但没有工作。 – Phoenix

答

请检查该片段：

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

有不同，你的情况的东西吗？

编辑这是我在Firefox中看到

这是我在Chrome中看到

EDIT 2

从我所知，你现在可以” t风格的<datalist>标签。

他的问题是它不会添加滚动条来遍历每个国家，该列表可能会填满整个页面。这一个也不是。这在Mozilla中很奇怪，没有下拉。在Chrome中，有一个下拉菜单，但没有滚动条。 – Alec

我明白并相信目前不可能这样做...为什么不尝试组合框？ – IonS

是的我想在Chrome中实现完全相同的功能，就像在Firefox中显示的一样。 – Phoenix

带滚动条的输入字段

相关推荐