htmlのselectボックスの中のプルダウンの高さを変更する方法がわかりません（画像あり）

htmlのselectボックスの中のプルダウンの高さを変更する方法がわかりません。
Airbnbの模写コーディングをしているのですが、プルダウンしたあとの高さを変更することができませんでした。

学習状況
HTML CSS Bootstrap

画像を添付しますのでご覧ください。
何でも良いのでわかる方、ご教授願います。

HTML--------------
<select class="styled-select1" name="heya">

<option value="tokyo">東京</option> <option value="tokyo2">東京<br>東京、東京都</option> <option value="tokyo3">東京都</option> <option value="tokyo4">東京都</option> <option value="tokyo5">東区東京塚町</option> <option value="tokyo6">東京田</option> <option value="tokyo7">中央区東京塚町</option> </select>

css---------------
.styled-select1 {
width: 400px;
padding: 12px 6px 12px 6px;
border-color: #C0C0C0;
color: #555555;
border-radius: 5px;
margin-bottom: 10px;
/* Chrome・Firefoxでセレクトボックスの矢印を消す */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

行動規範の内容に同意します

回答3件

ベストアンサー

Bootstrap のドロップダウンメニューを使えば、あまりJSに触れずに書くことができると思います。

サンプル

html
1<div class="dropdown">
2  <input id="dLabel" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" placeholder="東京">
3  <div class="dropdown-menu" aria-labelledby="dLabel">
4      <a class="dropdown-item" href="#">東京<br>東京、東京都</a>
5      <a class="dropdown-item" href="#">東京<br>東京、東京都</a>
6      <a class="dropdown-item" href="#">東京<br>東京、東京都</a>
7  </div>
8</div>

data-toggle =" dropdown "をリンクやボタンに追加してドロップダウンを切り替えます。

Dropdowns - Bootstrap 4.2 - 日本語リファレンス

投稿2020/09/19 01:23

編集2020/09/19 01:25

Lhankor_Mhy

総合スコア36898

satoshi4365

2020/09/19 05:52

実際に確認したところプルダウンの高さを変更し表示できました。ご回答ありがとうございます。

行動規範の内容に同意します

selectはCSSで見た目を変えることができますが、フォーカス時のoptionの見え方はブラウザ依存です。
模写されているサイトを検証ツールで見ていただくと、inputタグがフォーカス時にJavascriptでサジェストを表示するように作られています。
ですので、本家と同等な動きと見せ方をするには、CSSだけだはなくJavascriptのスキルも必要です。

投稿2020/09/18 16:36