セレクトボックスのデザイン

Question

前提・実現したいこと

上記の見本のように３つのセレクトボックスを１つにしたいです。
初めての質問でわかりにくかったらすみません。

該当のソースコード

<div class="are"><input type="text" placeholder="所在地"></div> <form> <select> <div class="is"><option selected value="marumarukasikiri">まるまる貸切</option></div> <option>個室</option> <option>シェアルーム</option> </select> </form> <form> <select> <option value="0">ゲスト0人</option> <option value="1">ゲスト1人</option> <option value="2">ゲスト2人</option> <option value="3">ゲスト3人</option> <div class="was"><option selected value="4">ゲスト4人</option> <option value="5">ゲスト5人</option> <option value="6">ゲスト6人</option> <option value="7">ゲスト7人</option> <option value="8">ゲスト8人</option> <option value="9">ゲスト9人</option> <option value="10">ゲスト10人</option> <option value="11">ゲスト11人</option> <option value="12">ゲスト12人</option> <option value="13">ゲスト13人</option> <option value="14">ゲスト14人</option> <option value="15">ゲスト15人</option> </select> </form>

試したこと

それぞれのセレクトボックスに<div>タグをつけました。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

>それぞれのセレクトボックスに<div>タグをつけました。
これはHTML的にアウトなのでは（文法違反という意味）。

Answer 1

こんばんは。

こういうことでしょうか。

サンプル

body {
  width: max-content;
  border: 1px black solid;
  border-radius: 5px;
}
input,
select {
  width: 100%;
  display: inline;
  border: none 0px;
  box-sizing: border-box;
}
form {
  border-top: 1px black solid;
}

---

たぶん、Airbnbの模写とかだと思いますけど、あれはたぶん、select要素を使ってないと思います。おそらく、React の Material-UI 的な何かだと思います。
本格的に同様のことをしたいのであれば、Material Design を検討したほうがいいかと思います。
Exposed dropdown menu | Menus - Material Design

Comments

[jontakayama]

出来ました。
ありがとうございます