html - 单击需要的大小打开一个选择框,即没有滚动条

标签 html css

<分区>

我有一个包含 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/

最佳答案

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

关于html - 单击需要的大小打开一个选择框,即没有滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53613879/

上一篇:html - 如何垂直对齐带有两个按钮的图标?

下一篇:javascript - Jquery 数据表在标题和正文部分之间有一些差距

相关文章:

javascript - 从 <span> 内的 <span> 获取文本

javascript - 用于从二进制流(字节数组)播放的视频播放器

javascript - 如何通过javascript为标签赋值?

html - Bootstrap 词缀过渡宽度不起作用

javascript - What happens to an HTML5 web worker thread when the tab is closed while it's running?

javascript - 如何使用 EJS 模板引擎将变量传递给内联 javascript?

html - css 100vh 没有将 div 设置为 100% 高度

javascript - 单击 javascript 函数时的代码不起作用?

html - float 表固定/相对位置的问题

javascript - 如何使用javascript隐藏一个类?