途中で面倒になったので中途半端ですが､食べﾛｸﾞの検索窓のｴｯｾﾝｽを取り出しました｡加えて､食べﾛｸﾞでは､ﾎﾞﾀﾝは 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;
}