使用所需的大小(即没有滚动条)在单击时打开一个复选框

Question

我有一个select元素，包含24个选项。当我点击它时，它会打开，在右边显示20个选项和一个滚动条。如何使元素显示所有24个选项而不显示滚动条？

​

<select>
  <option value=1>1</option>
  <option value=2>2</option>
  <option value=3>3</option>
  <option value=4>4</option>
  <option value=5>5</option>
  <option value=6>6</option>
  <option value=7>7</option>
  <option value=8>8</option>
  <option value=9>9</option>
  <option value=10>10</option>
  <option value=11>11</option>
  <option value=12>12</option>
  <option value=13>13</option>
  <option value=14>14</option>
  <option value=15>15</option>
  <option value=16>16</option>
  <option value=17>17</option>
  <option value=18>18</option>
  <option value=19>19</option>
  <option value=20>20</option>
  <option value=21>21</option>
  <option value=22>22</option>
  <option value=23>23</option>
  <option value=24>24</option>
</select>

​

https://jsfiddle.net/4bxek3v2/

Answer 1

基于SanRyu的回答，您可以在需要时设置大小，在不需要时重新设置大小，但是您需要一点JS。

<select onfocus="this.size=24;" onblur="this.size=1;" onchange="this.size=1; this.blur();">`

根据浏览器的不同，仍然显示(禁用的)滚动条，但高度现在是正确的。

演示：https://jsfiddle.net/4bxek3v2/5/

--

编辑:若要隐藏滚动条，请使用以下CSS：select { overflow: visible !important; }

Answer 2

使用这个(How to Set Height for the Drop Down of Select box)：

<select size="24">

size.asp