Высота поля выбора HTML (раскрывающийся список)

Может кто - то подтвердить , что его не возможно изменить высоту выпадающего меню, которое отображается при нажатии на поле выбора.

Атрибут размера для выбора делает его похожим на список, атрибут высоты в CSS тоже не помогает.

Подтверждено.

Часть, которая выпадает, устанавливается на:

1. Высота, необходимая для отображения всех записей, или
2. Высота необходимо , чтобы показать xзаписи (с скроллинга , чтобы увидеть остальные), где xнаходится
   • 20 в Firefox и Chrome
   • 30 в IE 6, 7, 8
   • 16 для Opera 10
   • 14 для Opera 11
   • 22 для Safari 4
   • 18 для Safari 5
   • 11 в IE 5.0, 5.5
3. В IE / Edge, если нет опций, тупо высокий список из 11 пустых записей.

Для (3) выше вы можете увидеть результаты в этом JSFiddle

Я работал над расширением jquery для замены выпадающего списка для решения этой проблемы. На момент написания этого поста он почти неотличим от нативного раскрывающегося списка с точки зрения внешнего вида и функциональности .

вот демо (также ссылка на загрузку): http://programmingdrunk.com/current-projects/dropdownReplacement/

вот страница проекта плагина:

http://plugins.jquery.com/project/dropdownreplacement

(обновление :) страница плагина jquery, похоже, больше не работает. Я, вероятно, не буду размещать свой плагин на их новом сайте, когда он заработает, поэтому не стесняйтесь использовать ссылку Programmingdrunk.com для демонстрации / загрузки

Нет . Невозможно изменить высоту раскрывающегося списка выбора, поскольку это свойство зависит от браузера.

Однако, если вам нужна эта функциональность, есть много вариантов. Вы можете использовать bootstrap dropdown-menuи определить его max-heightсвойство. Что-то вроде этого.

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

.dropdown-menu {
    max-height: 146px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}

.caret {
	  float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<div class="container" style="margin:10px">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

На самом деле ты вроде можешь! Не беспокойтесь с javascript ... Я просто застрял на том же самом для веб-сайта, который я создаю, и если вы увеличите атрибут 'font-size' в CSS для тега, он также автоматически увеличит высоту. Мелкий, но это то, что меня очень беспокоит, ха-ха

Это не идеальное решение, но вроде как работает.

В теге select включите следующие атрибуты, где n - количество выпадающих строк, которые будут видны.

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

У этого решения есть три проблемы. 1) При первом щелчке мышью все отображаемые элементы быстро мигают. 2) Положение установлено на «абсолютное». 3) Даже если элементов меньше «n», раскрывающийся список все равно будет иметь размер «n» элементов.

Chi Row ответ является хорошим вариантом для этой проблемы, но я нашел ошибку я с onclickаргументами. Вместо этого будет:

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

(И отметьте, что вы должны заменить " n " на количество строк, которое вам нужно)

Вы можете изменить высоту одного. Не используйте height="500"(просто пример номера). Используйте стиль. Вы можете использовать <style>тег или просто использовать это:

<!DOCTYPE html>
<html>
<body>
  <select id="option" style="height: 100px;">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

Я отмечаю изменение:

  <select id="option" style="height: 100px;">

А еще лучше ...

style="height: 100px;">

Ты видишь это?

Пожалуйста, проголосуйте, если это полезно!