Chrome-дисплей: нет выбора в выбранном

Question

Почему мой выпадающий список в Google Chrome прокручивается только на одну строку? Вместо многострочной прокрутки? Вот мой HTML-код:

<select>
        <option style="display:block;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
</select>

Однако, если я переместлю все элементы отображения: заблокировать элементы вверху, а все элементы отображения: ни одного элемента снизу, выпадающий список снова будет прокручиваться на несколько строк. Почему я не могу начать список с дисплея: нет опций?

Answer 1

Браузер заставляет высоту раскрывающегося списка отображаться как высоту первой партии видимых элементов до определенного размера. Однако вы заметите, что если вы поставите две сверху, вы получите две строки, три видимых дают три строки и так далее. Другие опции все еще есть, поскольку вы можете получить к ним доступ с помощью полосы прокрутки, однако полоса прокрутки не переходит на нужную величину.

Скрытие параметров таким способом нарушает работу большего количества браузеров, чем работает. Я рекомендую вместо этого удалить ненужные параметры из самого выбора, а не использовать display:none.

Answer 2

Chrome рассматривает первые 20 видимых опций для расчета высоты выпадающего меню, после чего вы видите полосу прокрутки, чтобы увидеть остальные опции.Вот почему вы видите только элементы блока первых 20 вариантов.

Для получения дополнительной информации: См. Принятый ответ