途中で面倒になったので中途半端ですが、食べログの検索窓のエッセンスを取り出しました。加えて、食べログでは、ボタンは 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; }