フォームを横に並べた時に高さが合わない食べログと同じような…

途中で面倒になったので中途半端ですが、食べログの検索窓のエッセンスを取り出しました。加えて、食べログでは、ボタンは position: absolute で絶対配置してたり、select に矢印を :after 疑似セレクタで設定していたりします。

<form class="search-form">
    <div class="input-wrap search-keyword">
        <input type="text" name="keyword" class="input-search-keyword" placeholder="キーワード">
    </div>

    <div class="input-wrap search-area">
        <select name="area" class="input-search-area">
            <option value="all" selected >すべての地域</option>
            <option value="11">あああ</option>
            <option value="12">いいい</option>
            <option value="13">ううう</option>
        </select>
    </div>

    <div class="input-wrap search-category">
        <select name="category" class="input-search-category">
            <option value="all" selected class="na">すべてのカテゴリー</option>
            <option value="11">あああ</option>
            <option value="12">いいい</option>
            <option value="13">ううう</option>
        </select>
    </div>

    <div class="input-wrap search-button">
        <input type="submit" value="検索" class="input-search-button">
    </div>
</form>

body {
  background: red;
  width: 100%;
}

body, div, input, select {
  margin: 0;
  padding: 0;
  border: 0;
}

.search-form {
  background: #fff;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}

.input-wrap {
  display: block;
  position: relative;
  float: left;
}

.input-wrap.search-keyword {
  width: 20%;
}

.input-search-keyword {
  width: 100%;
  height: 54px;
  padding-left: 5%;
}

.input-wrap.search-area {
  width: 30%;
}

.input-search-area {
  width: 100%;
  height: 54px;
  padding-left: 5%;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

.input-wrap.search-category {
  width: 30%;
}

.input-search-category {
  width: 100%;
  height: 54px;
  padding-left: 5%;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

.input-wrap.search-button {
  width: 20%;
}

.input-search-button {
  width: 100%;
  height: 54px;
  background: #ffc12a;
  cursor: pointer;
}

1件のコメントを見る
匿名回答1号 2018/01/30 09:32:51

何をどうしたら良いかのポイントを書いておきます。検索項目は keyword とか area とかのことです。

* float: left で検索項目を横並びにする。
* 検索項目の親要素には width を指定してトータルで 100% に収まるようにする。
* input や select は 100% にして親要素にぴったり張り付くようにする。
* vertical-align: middle で入力位置の縦の中央寄せをする。

フォームを横に並べた時に高さが合わない

みんなの回答

匿名回答1号2018/01/30 09:27:21

匿名回答1号 2018/01/30 09:32:51

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版