htmlデータリストオーバーフローを作成するには？

Question

私はリストがかなり長く、ページからスクロールするので、カテゴリリストに約7つのオプションを表示させ、残りをスクロールしようとしています。私はCSSのオーバーフローを試みましたが、どこでそれを行うべきかわかりません。

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

Answer 1

残念ながら、あなたはデータリスト 属性で行うことができますあまりありません。データリストは現在CSSスタイリングをサポートしていません。 と特定の視覚的特徴はブラウザ固有です。ブラウザの中には、長いリストのスクロールバーを追加するものがあります。

これが受け入れられない場合は、データリストを忘れて、 がJavascriptを使用してコンボボックスを実装する必要があります。私はJQueryが適切かもしれない オートコンプリート機能を持っていると信じています。 〜グレッグ Scroll bar for Datalist in HTML5

私はこれはまだケースだと思います。あなたはおそらくJQueryでそれを行うことができますが、わかりません。

・ホープこれはあなたがここに利用できるデータリストへの代替としてCOMBOXボックスを利用することができます

Answer 2

に役立ちます。

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