<div class="header-search-wrapper">
<span class="search-main"><i class="fa fa-search"></i></span><div class="search-form-main clearfix"><form role="search" method="get" class="search-form" action="siteadresi.com/">
<label>
<span class="screen-reader-text">Arama:</span>
<input type="search" class="search-field" placeholder="Ara …" value="" name="s">
</label>
<input type="submit" class="search-submit" value="Ara"></form></div></div>

    .header-search-wrapper {
     float: right;
     position: relative;
    }
    .search-main {
     display: block;
     line-height: 40px;
     padding: 0 14px;
     cursor: pointer;
     color: #fff;
     background: #408c40;
    }
    .header-search-wrapper .search-form-main {
background: #fff none repeat scroll 0 0;
-webkit-box-shadow: 1px 1px 7px rgba(0,0,0,.15);
box-shadow: 1px 1px 7px rgba(0,0,0,.15);
border-top: 2px solid #408c40;
padding: 15px;
position: absolute;
right: 0;
top: 124%;
width: 300px;
z-index: 9999;
opacity: 0;
visibility: hidden;
}
.search-form-main.active-search {
opacity: 1;
visibility: visible;
}
.header-search-wrapper .search-form-main {
border-top-color: #d33;
}
.header-search-wrapper .search-form-main:before {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #408c40;
content: "";
position: absolute;
right: 15px;
top: -10px;
}
.header-search-wrapper .search-form-main:before {
border-bottom-color: #d33;
}
.header-search-wrapper .search-form-main .search-field {
border-radius: 0;
padding: 4px 10px;
width: 75%;
float: left;
}
.header-search-wrapper .search-form-main .search-submit {
border: medium none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
float: left;
padding: 10px 0 10px;
width: 25%;
height: 36px;
background: #d33;
}

$('.header-search-wrapper .search-main').click(function(){
    $('.search-form-main').toggleClass('active-search');
    $('.search-form-main .search-field').focus();
});