Высота окна списка HTML с одним выбором

Question

У меня есть HTML <select>, который я хочу отобразить как «список» (блок, отображающий несколько элементов одновременно, а не раскрывающийся список).Однако я хочу разрешить выбор только одного элемента.Я также хочу установить высоту блока (через CSS) равным 100% его размера контейнера.

Эти три вещи кажутся взаимоисключающими.При установке атрибута multiple элемента <select> элемент управления будет отображаться в виде списка, а не раскрывающегося списка.Тем не менее, я не хочу, чтобы несколько элементов были выбраны, так что это не работает.Единственный известный мне способ сделать <select> в поле списка - установить для атрибута size значение> 1. Это также установит высоту окна, и, похоже, я не могувысота через CSS, когда атрибут HTML установлен.

Answer 1

Вы можете сделать <select> 100% от высоты <form>, которая его содержит.См. 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%;
}

Собранный как фрагмент, и уменьшающий его, чтобы он лучше подходил здесь ...

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>

Answer 2

Просто задайте границу для поля выбора и установите высоту.У меня это сработало.

select.custom-select-box {

border: 1px solid #999;

height: 28px;

}