html - 如何在 HTML 中使用多个属性制作下拉列表

Question

我正在尝试在制作下拉列表的地方使用多个属性，但它正在工作，但默认浏览器发生了变化。有什么办法可以让它下拉。请看代码..

    <select name="cars" multiple>
       <option value="volvo">Volvo</option>
       <option value="saab">Saab</option>
       <option value="opel">Opel</option>
       <option value="audi">Audi</option>
    </select>

但是如果我删除多个属性，我只能看到下拉列表。为什么当我使用多个时它显示不同的 HTML 控件。我用蓝色圈出了正确的控件，这就是我想要使用多个控件的方式。有什么建议或想法吗？

Answer 1

这段代码使用了选择器的size="6"属性，css 代码选择器将显示限制为选项标记的一行DOM Action 悬停在一个选择器上显示整个选择器:悬停是选项 size = "6"，鼠标指向选择一个或多个选项。选择器父级是表单的框架，相对定位需要它，默认情况下 child 绝对定位。这允许您获得一个极简主义的地方来呈现数据。 label 也打开选择器，浏览器在 DOM 中结合 id 属性和 for 属性后处理 DOM。随着索引打开到下一个 DOM 元素的顶部，如果您需要从父框架的底部边缘打开，请取消注释框架顶部父级高度的底部 0%。

您可以通过将 selected 属性添加到值为 None 的第一个选项来扩展它，然后服务器将收到一条消息，指出没有选择任何选项，

如果您输入 imput 作为添加选项以保存数据供以后选择，则可以添加 required 或 patterns 属性进行验证，这使您可以从用户那里获取他想要排序但不过滤的数据的信息。

CSS:

fieldset {
    position: relative;
    width: 300px;
}

select {
    position: absolute;
    height: 18px;
    overflow: hidden;
}

select:hover {
    position: absolute;
    height: auto;
    /* bottom: 10px; */
    z-index: 1;
    overflow: hidden;
}

HTML:

<form action="./shopping.php" method="GET">
    <fieldset>
        <legend>Clothes selection</legend>
        <label for="clothes">Select Ctrl+LMB:</label>
        <select multiple id="clothes" name="Outfit" size="6">
                <option value="Trousers" >Trousers</option>
                <option value="Hoodie">Hoodie</option>
                <option value="T-shirt">T-shirt</option>
                <option value="Trousers">Trousers</option>
                <option value="Hoodie">Hoodie</option>
                <option value="T-shirt">T-shirt</option>
        </select>
    </fieldset>
</form>