search field animation

index.html

<div class="search">
<form action="" method="post" class="form-inline">
 <img src="http://placehold.it/24x24" />
 <input name="searchword" id="mod-search-searchword" maxlength="20" class="inputbox search-query" size="20" value="Suchen..." onblur="if (this.value=='') this.value='Suchen...';" onfocus="if (this.value=='Suchen...') this.value='';" type="text">		<input name="task" value="search" type="hidden">
		<input name="option" value="com_search" type="hidden">
		<input name="Itemid" value="143" type="hidden">
	</form>
</div>

script.js

$('.search input').focus(function(){
    $('.search').addClass('open');
});
$('.search input').blur(function(){
    $('.search').removeClass('open');
});

search-field-animation.markdown

search field animation

slide in search input field by hover on icon

A Pen by Alexander Schmidt on CodePen.

License.

style.css

.search,
.search * {
  padding: 0;
  margin: 0;
}

.search {
  width: 24px;
  height: 24px;
  overflow: hidden;
  position: relative;
  background-color: red;
  float: right;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out
}

.search:hover,
.search.open {
  width: 200px;
}

.search form {
  width: 200px;
}

.search input {
  height: 22px;
  line-height: 22px;
  border: 1px solid #ccc;
  float: right;
  width: 174px;
  text-indent: 5px;
}