单选 HTML 列表框高度答案

【问题标题】：Single-Select HTML List Box Height单选 HTML 列表框高度
【发布时间】：2011-09-24 15:17:14
【问题描述】：

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

这三件事似乎是相互排斥的。设置<select> 元素的multiple 属性将使控件呈现为列表框而不是下拉列表。但是，我不希望选择多个元素，所以这不起作用。我知道将<select> 放入列表框的唯一另一种方法是将size 属性设置为> 1。这也将设置框的高度，看来我无法更改设置 HTML 属性时通过 CSS 设置高度。

【问题讨论】：

如果你要使用 js，你可以设置一个 div 的样式，让它看起来像你想要的 - 在那个 div 中堆叠某些类的 spans 或 divs 或 anchoprs。您可以使用悬停使其看起来像是在选择一个选项。 onclick 你可以获取点击的 div/span 的一些属性（或者它可以是一堆链接，所以你可以获取 href）。然后，您可以将该属性的值设置为隐藏输入。并且 onclick 您还可以更改该子元素的背景颜色。

标签： html css select listbox

【解决方案1】：

您可以将<select> 设置为包含它的<form> 高度的100%。请参阅this fiddle 以获取包含表单的 div 示例，其中选择填充表单的高度。

这从一个简单的结构开始，足以将表单包含在某些东西中，以便您可以看到相对布局。

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

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

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

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

组合成一个 sn-p，并使其更小以更好地适应这里...

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>

【讨论】：

该死的，这太容易了））））
有趣的是，我在自己的调查中选择了 height: 100%，但它没有用……我一定是搞砸了别的东西。

【解决方案2】：

只需给选择框一个边框并设置一个高度。它对我有用。

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

<select class='custom-select-box'></select>

【讨论】：