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

Question

我在我的 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;
}

codesandbox

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

Answer 1

使用 size 属性设置行数。

例如，

<select size=4>