帶滾動條的輸入字段

我已經創建了一個輸入字段，用戶可以在其中輸入任何他們想要搜索的內容。我也創建了一個下拉列表，但問題是下拉列表超出了頁面，只顯示了幾個項目。所以，我也想創建滾動條來輕鬆訪問所有的項目。該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; 

}

來源

2017-07-24 Phoenix

需要嘗試在這裏更好地設置您的代碼格式，還可以顯示您當前擁有的CSS嗎？如果內容溢出元素的框，CSS溢出屬性將自動添加滾動條。 – Alec

默認情況下'datalist'提供一個滾動條。你的CSS影響了什麼？ –

[HTML5中的Datalist的滾動條]的可能重複（https://stackoverflow.com/questions/23042745/scroll-bar-for-datalist-in-html5） – Muhammad

試試這個：

#country option { 
    overflow:scroll; 
}

嘗試沒有與選項，不知道如何將有所作爲。

來源

2017-07-24 18:47:53

我已經使用了溢出標記，但沒有工作。 – 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>標籤。

來源

2017-07-24 18:50:11 IonS

他的問題是它不會添加滾動條來遍歷每個國家，該列表可能會填滿整個頁面。這一個也不是。這在Mozilla中很奇怪，沒有下拉。在Chrome中，有一個下拉菜單，但沒有滾動條。 – Alec

我明白並相信目前不可能這樣做...爲什麼不嘗試組合框？ – IonS

是的我想在Chrome中實現完全相同的功能，就像在Firefox中顯示的一樣。 – Phoenix

帶滾動條的輸入字段

回答

相關問題