Height of an HTML select box (dropdown)

Question

Can someone confirm that its not possible to change the height of a dropdown that is shown when you click on a select box.

The size attribute of the select makes it look like a list, the height attribute in the CSS doesnt do much good either.

Answer 1

Confirmed.

The part that drops down is set to either:

1. The height needed to show all entries, or
2. The height needed to show x entries (with scrollbars to see remaining), where x is
   • 20 in Firefox & Chrome
   • 30 in IE 6, 7, 8
   • 16 for Opera 10
   • 14 for Opera 11
   • 22 for Safari 4
   • 18 for Safari 5
   • 11 in IE 5.0, 5.5
3. In IE/Edge, if there are no options, a stupidly high list of 11 blanks entries.

For (3) above you can see the results in this JSFiddle

Answer 2

NO. It's not possible to change height of a select dropdown because that property is browser specific.

However if you want that functionality, then there are many options. You can use bootstrap dropdown-menu and define it's max-height property. Something like this.

$('.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>