Question

我有一个HTML <select>，我想将其显示为“列表框”（一个同时显示多个项目的框，而不是下拉框）。但是，我只想允许选择一个项目。我还想将盒子的高度（通过CSS）设置为容器大小的100％。

这三件事似乎是相互排斥的。设置multiple元素的<select>属性将使控件呈现为列表框而不是下拉列表。但是，我不希望选择多个元素，因此这不起作用。我知道在列表框中创建<select>的唯一方法是将size属性设置为值＆gt; 1.这也将设置框的高度，当设置HTML属性时，我似乎无法通过CSS更改高度。

Answer 1

您可以<select>包含它的<form>高度的<div> <form> <select id="thelist" size="4"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> </select> </form> </div> 100％。有关包含表单的div的示例，请参阅this fiddle，其中select填充表单的高度。

这从一个简单的结构开始，只是表单被包含在某个东西中，所以你可以看到相对的布局。

div {
    background-color: #fff0f0;
    height: 40em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 90%;
}
#thelist {
    height: 100%;
}

我给div一个高度，一个背景，你可以看到它，并填充所以它的内容不会自然覆盖它。使表格成为您想要的任何高度，包括100％的div。我做了90％，所以你仍然可以看到封闭的div。请注意，表单的宽度填充除了填充之外的div宽度。

然后，您可以将选择列表的高度设置为表单内所需的任何内容。这是我的CSS

div {
    background-color: #fff0f0;
    height: 20em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 40%;
}
#thelist {
    height: 100%;
}

将它们放在一起作为一个片段，并将其缩小以适应更好的...

<div>
    <form>
        <select id="thelist" size="4">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
    </form>
</div>

{{1}}

Answer 2

只需为选择框添加边框并设置高度。它对我有用。

select.custom-select-box {
border: 1px solid #999;

height: 28px;
}

单选HTML列表框高度

2 个答案: