• HTML
• CSS

HTML

<nav>
    <div class="cont">
        <label>Buscar</label>
        <input type="search" placeholder="en esta Web" title="Presione Esc para supender la búsqueda">
    </div>
</nav>

CSS

nav{
    width:100%;
    height:60px;
    font-family:sans-serif;
    background:#7d3c98;
    border-bottom:4px solid rgba(0,0,0,0.1);
    color:#fff;
}

.cont{
    height:100%;
    padding-top:0px;
    float:right;
}
.cont label{
    font-size:12.9px;
}

input[type="search"]{
    width:170px;
    margin:10px;
    padding:10px 16px;
    border-radius:32px;
    outline:none;
    border:2px solid #8e44ad;
    transition:all 0.5s;
}
input[type="search"]:focus{
    background:#fff;
    width:300px;
}