如何使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;
}

代码沙箱

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

Answer 1

使用size属性设置行数。

例如，

<select size=4>