如何在CSS或JavaScript中调整<select>元素的高度？

Question

我有一个下拉菜单，它位于一个框内。我希望下拉菜单填满整个框。宽度已经填满整个框，但我找不到改变下拉菜单高度的方法。

我尝试使用height和调整padding，但我无法找到答案。

<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>

- pannyandrew

---

请添加相应的CSS。若没有添加，您的包含框将会自动调整为其内容的高度。 - Jennifer Goncalves

你能同时添加CSS吗？ - Utsav Patel

Answer 1

我正在修改Deepshika的答案。

$("#select-height").focus(function () {
      this.size=10;
      $(this).css({"height":"200px", "position":"absolute"});
})
$("#select-height").blur(function () {
  this.size=1;
  $(this).css({"height":"40px", "position":"inherit"});
});

#select-height{
  height:40px;
  z-index:1;
  width:200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>start</div>
<select id="select-height" 
onchange='this.size=1; this.blur();'>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
     <option>12</option>
     <option>13</option>
     <option>14</option>
     <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
  </select>
  <div>Last</div>

Live Demo

- Shubham Verma

Answer 2

 <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">

这对我来说很好用，您可以根据需要调整位置。通过将位置设置为绝对值，它会显示在下面，如果您不指定位置，则会在顶部显示，移动所有其他代码。

- Deepshika

Answer 3

也许这就是你需要的：

#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>

- Pavlo Kovchuk

Answer 4

您可以在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>

- TVBZ

Answer 5

这段 CSS 代码会起到作用，根据你的要求进行调整。

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;
}

- bstory

Answer 6

不能说功能如何，但是为了美观起见，只需在上下添加合适的字体大小的内边距，就可以达到类似增加“select”高度的效果。

<select class="dropdown_list">

</select>

在CSS中：根据需要设置填充。

.dropdown_list{
   padding: 10px 0 10px 10px;
}

- Bibek Bhattarai