How to make below style:

How to make below style:

I'd like to achieve something like this:

I've done this so far:

just wondering, how to make a purple area with little arrow button and
once user click it, it would invoke something.
Here is the html and css code I have:
<div class="searchy">
<input type="search" name="ttsearch" data-style="mini" data-theme="d"
placeholder="Search here..." class="fdSearch" value=""/>
</div>
CSS:
.searchy{
height: 60px;
background-color: #555;
color: #FFF;
margin-left: -15px;
margin-right: -15px;
}
.fdSearch{
background-color: white;
border-radius: 10px;
border: 5px solid #E5E4E2;
margin: 2px;
margin-left: -15px;
margin-right: -15px;
height: 40px;
vertical-align: middle;
padding: 20px;
margin-top: 15px;
width: 85%;
}