Hello Saeed.
The Twenty Thirteen theme does this nicely.
Use your inspector to view the focus states of the Twenty Thirteen search icon. Make note of the CSS used in its inactive state and its focused state.
Copy and paste the input markup and CSS into your project.
The Twenty Thirteen theme makes use of Genericon icon fonts.
Example:
<!-- markup -->
<form role="search" method="get" class="search-form" action="https://yoursite.com/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
</label>
<input type="submit" class="search-submit" value="Search">
</form>
And the CSS:
.search-field {
background-color: transparent;
background-image: url(images/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 1px;
}
.search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
The main difference is the width property on click/focus state.
