How can I resize the height of the <select> element in CSS or Javascript?

Question

I have a dropdown menu that is inside a box. I want the dropdown menu to fill up the entire box. The width fills up the entire box, but I cannot seem to find a way to change the height of the dropdown menu.

I have tried using height and messing with the padding but I can't find an answer anywhere.

 <div class="custom_select" id="main_dropdown_menu"> <select class="dropdown_list" name="list of majors" id="main_dropdown"> <option value="default" selected="selected" id="submenu">---</option> <option value="arts">Arts</option> <option value="business">Business</option> <option value="engineering">Engineering</option> <option value="health">Health</option> <option value="humanities">Humanities</option> <option value="natural sciences">Natural Sciences</option> <option value="social sciences">Social Sciences</option> </select> </div>

Answer 1

You can just set the height of select box in CSS:

 select.dropdown_list { height: 30px; }

 <div class="custom_select" id="main_dropdown_menu"> <select class="dropdown_list" name="list of majors" id="main_dropdown"> <option value="default" selected="selected" id="submenu">---</option> <option value="arts">Arts</option> <option value="business">Business</option> <option value="engineering">Engineering</option> <option value="health">Health</option> <option value="humanities">Humanities</option> <option value="natural sciences">Natural Sciences</option> <option value="social sciences">Social Sciences</option> </select> </div>

Answer 2

Maybe it is what you need:

 #main_dropdown_menu{ height: 200px; background: grey; } #main_dropdown{ height: 100%; }

 <div class="custom_select" id="main_dropdown_menu"> <select class="dropdown_list" name="list of majors" id="main_dropdown"> <option value="default" selected="selected" id="submenu">---</option> <option value="arts">Arts</option> <option value="business">Business</option> <option value="engineering">Engineering</option> <option value="health">Health</option> <option value="humanities">Humanities</option> <option value="natural sciences">Natural Sciences</option> <option value="social sciences">Social Sciences</option> </select> </div>

Answer 3

This CSS will do the trick, adjust to your requirements.

select {
   height: calc(1.5em + .75rem + 2px);
   padding: .375rem 1.75rem .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   vertical-align: middle;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Answer 4

 <select style="position: absolute;" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;" class="dropdown_list" name="list of majors" id="main_dropdown">

This works just fine for me you can adjust the position according to where you want it to appear. By stating position to be absolute it shows the list down, if you do not state it then it will show on top moving all your other codes.