BLOGGER: ADD A CUSTOM SEARCH BOX PART II

I assume you have already read the first part of my tutorial in adding a search box and you already have an idea which values to change when you want to change its size, color or its entire look. So this time we don't need to get into details.

Today I will give you the codes to create a search box that expands when you click it.

See it in action Click the magnifier to expand

Click anywhere inside the input box to expand

NOW THE CODES.
FOR THE FIRST ONE:

 <style>  
 .search-field {  
  background-color: transparent;  
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPgVVp8dTuNfkyP1bAhzn2XZbxrU9k8vNvC3Xpw-fdyiGNbiMDDKlKhkY__7SrF-B542Hs6gnvHp5-bb71qdGL8mlOT242vakC8B6r5Fs3dy3lw8LuZ6Mjpo3w9AuqOwmh84Qn8O642Yv/s35/grey.png);  
  background-position: 5px center;  
  background-repeat: no-repeat;  
  background-size: 25px 25px;  
  border: 2px solid transparent;  
  cursor: pointer;  
  height: 35px;  
  margin: 3px 0;  
  padding: 0 0 0 45px;  
  position: relative;  
  -webkit-transition: width 400ms ease, background 400ms ease;  
  transition: width 400ms ease, background 400ms ease;  
  width: 0;  
 color: #222;  
 font-family: Arial;  
 font-size:14px;  
 }  
 .search-field:focus {  
  background-color: #fff;  
  border: 2px solid #575757;  
  cursor: text;  
  outline: 0;  
  width: 250px;
 }  
 </style>  
 <form action='/search' id='search' method='get'>  
 <input class='search-field' name='q' placeholder='Search...' title='Click to Search!' type='text'/>  
 </form>  

FOR THE SECOND ONE:

 <style>  
 #search1 input{  
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwqkslmDw9lQNl21Qv_ULNiLYTKuWO2VJeaKKskKx3PPTQqiG5gFHRdKtiSxZka4Ti1SjLBZXCHcC_rEE1OwWeX6gOfZG_YDPR4MbL1EPLtAmiyHkiuXk8twNrv9Khcp9oLqXbshCK0dRY/s20/black.png) no-repeat 8px 4px #ffffff;  
 border: 2px solid #000000;  
 font: bold 12px calibri, serif;  
 color: #000000;  
 width: 160px;  
 padding: 5px 15px 5px 30px;  
 -webkit-transition: all 0.5s ease 0s;  
 -moz-transition: all 0.5s ease 0s;  
 -o-transition: all 0.5s ease 0s;  
 transition: all 0.5s ease 0s;  
 }  
 #search1 input:focus {  
 width: 200px;  
 outline: none;  
 border: 2px solid #777777;  
 }  
 </style>  
 <form action='/search' id='search1' method='get'>  
 <input name='q' placeholder='Search Tweak Peek' size='40' type='text'/>  
 </form>  

If you prefer the search boxes with rounded corners, or you need them in other colors CLICK HERE. I have a few search icons in different colors for these search boxes. :)