有下拉的搜索框

今天一上就做出来这么个玩意，真的伤。。。

不过总算是做出来，样式勉强能看。有需要的可以参考一下

代码没有提炼 比较乱就是，先看下具体样式吧

css ：

                        html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
text-align: center;
}

.h-img {
width: 100%;
height: auto;
text-align: center;
}

.h-ss {
position: relative;
top: -40px;
left: 5%;
display: flex;/*弹性布局*/
flex-flow: row;/*单排*/
margin: 0;
padding: 0;
width: 90%;
height: 30px;
text-align: center;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
}

.h-ss .h-qz {
padding: 0;
margin: 0;
width: 20%;
height: 30px;
background-color: red;
border-radius: 15px 0px 0px 15px;
}

.h-ss .h-qz select {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
border-radius: 15px 0px 0px 15px;
}

.h-ss .h-inp {
width: 60%;
height: 30px;
border: 0;
}

.h-ss .h-inp input {
width: 100%;
height: 30px;
font-size: 0.9em;
border-radius: 0px 0px 0px 0px;
border: 0;
}

.h-ss .h-s-img {
width: 20%;
height: 100%;
border-radius: 0px 15px 15px 0px;

}

html ：

<div class="h-img">
<img src="img/public.png" width="100%" />

<div class="h-ss">

<div class="h-qz">
<select name="">
<option value="">全站</option>
</select>

</div>

<div class="h-inp">
<input placeholder="输入关键字查找..." name="" id="" value="" />

</div>

<div class="h-s-img">
<img src="img/qy-ss.png" width="50%" height="100%" />
</div>
</div>

</div>

OK！ 有什么问题可以在评论里面问