如何使html datalist溢出？

我想讓類別列表顯示大約7個選項，其餘的滾動，因爲列表很長，滾動頁面。我試圖做css溢出，但我不知道在哪裏做。如何使html datalist溢出？

<form class="gameForm" method='POST' action='/game'> 
 
     <h2>CHOOSE A CATEGORY</h2> 
 
     <input type="text" list="category" name="category" placeholder="Category"> 
 
      <datalist id="category"> 
 
       <option value="any">Any Category</option> 
 
       <option value="9">General Knowledge</option> 
 
       <option value="10">Entertainment: Books</option> 
 
       <option value="11">Entertainment: Film</option> 
 
       <option value="12">Entertainment: Music</option> 
 
       <option value="13">Entertainment: Musicals &amp; Theatres</option> 
 
       <option value="14">Entertainment: Television</option> 
 
       <option value="15">Entertainment: Video Games</option> 
 
       <option value="16">Entertainment: Board Games</option> 
 
       <option value="17">Science &amp; Nature</option> 
 
       <option value="18">Science: Computers</option> 
 
       <option value="19">Science: Mathematics</option> 
 
       <option value="20">Mythology</option> 
 
       <option value="21">Sports</option> 
 
       <option value="22">Geography</option> 
 
       <option value="23">History</option> 
 
       <option value="24">Politics</option> 
 
       <option value="25">Art</option> 
 
       <option value="26">Celebrities</option> 
 
       <option value="27">Animals</option> 
 
       <option value="28">Vehicles</option> 
 
       <option value="29">Entertainment: Comics</option> 
 
       <option value="30">Science: Gadgets</option> 
 
       <option value="31">Entertainment: Japanese Anime &amp; Manga</option> 
 
       <option value="32">Entertainment: Cartoon &amp; Animations</option> \t 
 
      </datalist> 
 
     <h2>NUMBER OF QUESTIONS</h2> 
 
     <input class="number" name='number_of_questions' type='number' min='1' max="50" placeholder='Number of Questions' required /> 
 
     <h2>DIFFICULTY</h2> 
 
     <input list="difficulty" name="difficulty" placeholder="Difficulty"> 
 
      <datalist id="difficulty"> 
 
       <option value="easy"> 
 
       <option value="medium"> 
 
       <option value="hard"> 
 
      </datalist> 
 
    
 
     <input class="buttons" type='submit' value='ADD GAME!' /> 
 
    </form>

來源

2017-08-03 jdip88

你是否做了一些研究？第一次打：https://stackoverflow.com/questions/43491711/how-to-give-scrolling-effect-in-datalist-dropdown – JeroenE

不幸的是，沒有造型和html5 datalist限制。但是，您可以根據需要使用選擇並設置其大小 –

不幸的是，有沒有什麼可以使用DataList 屬性做。數據列表當前不支持任何CSS樣式，並且特定的視覺特徵是特定於瀏覽器的。某些瀏覽器可能會選擇爲長列表添加滾動條。

如果這是不可接受的，您可能不得不忘記數據列表，並通過Javascript實現組合框。我相信JQuery有一個自動完成功能可能是合適的。〜格雷格 Scroll bar for Datalist in HTML5

我認爲這仍是如此。你可以用JQuery做，但我不確定。

希望這有助於

來源

2017-08-03 11:20:36 Bolphgolph

您可以使用COMBOX箱作爲備用，以數據列表可以在這裏找到。

https://www.zoonman.com/projects/combobox/

<style type="text/css" media="screen"> 
     div.combobox {font-family: Tahoma;font-size: 12px} 
     div.combobox {position: relative;zoom: 1} 
     div.combobox div.dropdownlist {display: none;width: 200px; 
      border: solid 1px #000;background-color: #fff; 
      height: 200px;overflow: auto;position: absolute; 
      top: 18px;left: 0px;} 
     div.combobox .dropdownlist a {display: block;text-decoration: none; 
      color: #000;padding: 1px;height: 1em;cursor: default} 
     div.combobox .dropdownlist a.light {color: #fff; 
      background-color: #007} 
     div.combobox .dropdownlist, input {font-family: Tahoma;font-size: 12px;} 
     div.combobox input {float: left;width: 182px; 
      border: solid 1px #ccc;height: 15px} 
     div.combobox span {border: solid 1px #ccc;background: #eee; 
      width: 16px;height: 17px; 
      float: left;text-align: center;border-left: none;cursor: default} 
    </style> 

<!-- HTML code --> 
<div class="combobox"> 
    <input type="text" name="comboboxfieldname" id="cb_identifier"> 

    <span>▼</span> 
    <div class="dropdownlist"> 
     <a>Item1</a> 
     <a>Item2</a> 

     <a>Item3</a> 
    </div> 
</div> 
<!-- JS code --> 
<script type="text/javascript" charset="utf-8" src="combobox.js"></script> 
<script type="text/javascript" charset="utf-8"> 

var no = new ComboBox('cb_identifier'); 
</script>

下載插件組合框從：

https://www.zoonman.com/projects/combobox/combobox.js

來源

2017-08-03 11:30:05 techhunter

如何使html datalist溢出？

回答

相關問題