<li>の中の<select>要素の大きさを指定したい。

Question

display: flex;を用いて、
selectフォームを横並びにしたのち、
縦、横のサイズを変えたいです。
heightは指定できたのですが、
widthを指定できませんでした。

２つのselect要素は、<li>の中に入っているので、
各親要素のwidthを指定したり、
select要素をdiplay:blockにしたり、、、
思い当たる事を一通り試したのですが、
上手く行きません。

対処法と、上手くいかない理由を教えていただければ、と思っております。

よろしくお願いします。

<section class="form-wrapper">
  <div class="form">
    <h2>宿泊施設の内容を記入</h2>
    <input type="text" value="東京">
    
   <ul>
     <li class="room">
       <select id="room">
         <option>まるまる貸切</option>
         <option>個室</option>
         <option>シェアルーム</option>
       </select>
     </li>
     <li class="gest">
      <select id="gest">
        <option>ゲスト4人</option>
        <option>ゲスト4人</option>
        <option>ゲスト4人</option>
        <option>ゲスト4人</option>
        <option>ゲスト4人</option>
        <option>ゲスト4人</option>
      </select>
     </li>
   </ul>

/* インプットセクション */

.form input,
.form .btn{
  display: block;
}

.form-wrapper{
  width: 90%;
  margin: 0 auto;
  background: white;
}

.form{
  padding:40px;
}


.form h2{
  font-size:18px;
}

.form .btn{
  width:100%;
  line-height: 60px;
  text-align: center;
  background:#DB3742;
  color: white;
  font-weight: bold;
  border-radius: 4px;
}

.form input{
  line-height: 50px;
  border-radius: 4px;
  border: 1px #DCE0E0 solid;
  width: 100%;
  margin-bottom:5px;
  font-size:20px;
  color:gray;
}

.form-wrapper ul{
  width: 100%;
  display: flex;
  padding:0;
  margin:0;
}

.room,
#room{
  width: 50%;
  height: 50px;
}

.gest,
#gest{
  width: 50%;
  height: 50px;
}

select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  }
  select::-ms-expand{
  display: none;
  display: block;
  }

Answer 1

以下のように、親要素と子要素との横幅の指定を分離する必要があります。

/* 子要素である#roomや#gestにも50%が指定されてしまっている。 */
/*
.room,
#room{
  width: 50%;
  height: 50px;
}
.gest,
#gest{
  width: 50%;
  height: 50px;
}
*/

/* 以下のように書き換え。heightもどちらか片方に指定したほうがよさそうですが今回は触れません。 */
.room,
.gest {
  width: 50%;
  height: 50px;
}
#gest,
#room {
  width: 100%;
  height: 50px;
}

---

元のソースコードだと、以下の.roomと#room両方にwidth: 50%;が指定されていました。

この場合、#idの横幅は、すでに全体の50%の横幅を指定されている.roomの、更に50%の横幅となるため、全体の横幅からすると25%になってしまいます。

<li class="room"><!-- 全体の50%の横幅 -->
  <select id="room"><!-- .roomの50%の横幅 = 全体の25%の横幅 -->

そのため、#idには、親要素の横幅いっぱい = width: 100%;を指定する必要があります。

---

追記です。プラスアルファの話として、
今回display: flex;を使用しているので、以下のように書き換えてもいいのではと思います。

.room,
.gest {
  flex: 1 1 0%;
  height: 50px;
}
.room {
  margin-right: 10px; /* 好きな値を指定してください。 */
}
#gest,
#room {
  width: 100%;
  height: 50px;
}

Answer 2

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

.room,
#room{
  width: 50%;
  height: 50px;
}
select,
#room{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  }

Comments

[kei344]

あ、#gestもか。