Высота выпадающего списка HTML-списка

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

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

Ответ 1

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

Ответ 2

Просто откройте рамку выбора и установите высоту. Это сработало для меня.

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

height: 28px;
}