17

Without using any plugins, how can I increase the height of the <select> box in CSS?

I tried line-height but it didn't work for me.

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Jazmin
  • 616
  • 1
  • 7
  • 21

4 Answers4

31

I came across this other answer that actually works, if anyone chances across this question again.

How to standardize the height of a select box between Chrome and Firefox?

Basically you change the appearance definition of the element, then you can add style to it.

.className {
   -webkit-appearance: menulist-button;
   height: 50px;
}

Worked for me, but it does change the border on the element. Just be sure to cross-browser check it after the change and ensure the border styling is still acceptable.

Community
  • 1
  • 1
Vallier
  • 551
  • 1
  • 6
  • 10
4

just give a height to the option in your stylesheet so that you can easily calculate the height of select field with the number of option rows

<style>
      select>option{ 
                   height:20px;
                 }
</style>

and add this function in your script tag as you desire or just copy this

<script>function myFunction() {
var x = document.getElementById("mySelect").length;
var y = 20 * x +10;
document.getElementById("mySelect").style.height = y+"px";}</script>

Body section

<body onload="myFunction()"><select id="mySelect" multiple="multiple"><option>Apple</option>option>Pear</option><option>Banana</option><option>Orange</option><option>Banana</option></select></body>
desertnaut
  • 57,590
  • 26
  • 140
  • 166
prajun karn
  • 71
  • 3
2

For me this did the trick:

select {
    font: inherit;
}
Florian Wendelborn
  • 1,667
  • 1
  • 19
  • 29
1

Since the priority is given to the inline-styling, you can use this trick to increase the height of your select list. All you have to do is add inline-style in the select tag.

<!-----------If you are using Bootstrap ---------->

  <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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

<div class="container">
  <form>
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="form-control" style=" height:50px;" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      </div>
    </form>
  </div>
  </body>
Shalinee SIngh
  • 199
  • 8