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

您可以使用combox box作为此处提供的datalist的替代。

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>

从以下网址下载combobox插件：

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

Answer 2

不幸的是，你对数据主义者的处理能力不高   属性。 datalist目前不支持任何CSS样式，   特定的视觉特征是特定于浏览器的。一些   浏览器可以选择为长列表添加滚动条。

如果这不可接受，您可能不得不忘记datalist和   通过Javascript实现ComboBox。我相信JQuery有一个   自动完成功能可能是合适的。   〜格雷格   Scroll bar for Datalist in HTML5

我认为情况仍然如此。你可以在JQuery中做到这一点，但我不确定。

希望这有帮助

如何让html datalist溢出？

2 个答案: