Hidden search bar, no JS

by xaliber

HTML

<a style="float:right;margin-right:200px;position:relative;width:30px;height:54px;background:#ccc;display:block;">
    
<div class="search_bar">
    <input type="text" placeholder="Search the site!" name="s">
</div>
    
</a>

CSS

/**************

Inspirasi dari sini: http://stackoverflow.com/questions/13744923/hide-jquery-generated-content-when-css-focus-is-false

***************/

.search_bar input[type="text"] {
position: absolute;
right: 0px;
top: 0;
    padding: 0 0 0 54px;
    width: 0px;
    height: 54px;
    -webkit-transition: width 0.5s ease-in-out;
    background: #fff url("http://www.macsgear.com/magnify_icon.gif") no-repeat;
    background-position:12px 12px;
    border:1px solid #bbb;
}

.search_bar input[type="text"]:focus{
    width: 250px;
    padding: 0 10px 0 54px;
    outline: none;
}