＜option＞タグで展開されたメニューに高さを指定しスクロールできるようにしたい

Question

セレクトボックスのオプションタグで展開されたメニューに高さを指定し、スクロールできるようにしたいです（画像の赤い部分）。具体的にはクリックしたら<option value="guest5">まで表示され、残りの表示はスクロールして見れるようにしたいです。CSSでoptionに高さを指定しても反映されません。CSSの記述方法をご教授頂ければ幸いです。

<div class="form">
 	 <table>
      <tr>
       <td><form action="" method="post">
       <input type="text" name="area" placeholder="所在地">
       </form></td>

      </tr>
      <tr><td>
       <select name="room">
        <option value="kasikiri">貸し切り</option>
        <option value="kositu">まるまる個室</option>
        <option value="syher">シェア</option>
       </select></td>
      </tr>
      <tr>
       <td><select name="peopre">
        <option value="guest">ゲスト０人</option>
        <option value="guest1">ゲスト１人</option>
        <option value="guest2">ゲスト２人</option>
        <option value="guest3">ゲスト３人</option>
        <option value="guest4">ゲスト４人</option>
        <option value="guest5">ゲスト５人</option>
        <option value="guest6">ゲスト６人</option>
        <option value="guest7">ゲスト７人</option>
        <option value="guest8">ゲスト８人</option>
        <option value="guest9">ゲスト９人</option>
        <option value="guest10">ゲスト１０人</option>
        <option value="guest11">ゲスト１１人</option>
        <option value="guest12">ゲスト１２人</option>
        <option value="guest13">ゲスト１３人</option>
        <option value="guest14">ゲスト１４人</option>
        <option value="guest15">ゲスト１５人</option>
       </select></td>
      </tr>
     </table>

table{
   margin-bottom: 30px;
   
}


table input{
    width: 380px;
    border-radius: 10px;
    height: 50px;
    font-size: 16px;
    padding-left: 5px;

}

table tr{
    width: 380px;
    border-radius: 10px;
    height: 50px;
}


table select{
    width: 390px;
    border-radius: 10px;
    height: 55px;
    font-size: 16px;
    padding-left: 5px;
}

option{
    background: red;
    
}

Answer 1

不可能です。
2021年2月現在、<select>のポップアップメニューの高さを指定する手段は存在しません。ブラウザがそれぞれの判断でスクロール可能にします。

Comments

[dehi0923]

ご返信ありがとうございます。高さは指定できないんですね。ご教授頂きありがとうございます。