时间戳

首页 > 解决方案 > 如何在 React Js 中使选择下拉菜单高度更小？

javascript - 如何在 React Js 中使选择下拉菜单高度更小？

问题描述

我在我的 React Js 应用程序中使用选择下拉菜单，但我找不到使用滚动条使下拉菜单的高度变小的方法。我的代码：


export default function App() {
  return (
    <div className="App">
      <select>
        <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>
      </select>
    </div>
  );
}

和CSS

option {
  position: absolute;
  margin-top: 1px;
  font: 10px;
  background: blue;
  color: white;
  height: 50px;
}

密码箱

当我在 css 中选择选项时，我可以设置背景和颜色的样式，但是当我尝试为 ex 添加高度 50px 时，它不起作用。我想要实现的是有一个高度小的下拉菜单（所以如果选项太多，下拉菜单本身不会一直向下）和一个滚动条。非常感谢任何帮助和建议。

标签： javascriptcssreactjsselectdrop-down-menu

解决方案

使用 size 属性设置行数。

例如，

<select size=4>

推荐阅读