How to expand small square input box on hitting search icon in css?

Question

I have a search-bar with search icon at the extreme left as shown here in the fiddle and in the screen shot below.

The HTML and CSS codes which I have used in order to make the search icon and the square border is:

HTML:

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand ">
</form>

CSS:

.back{
  padding: 0.5%;
  background: #10314c;

}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.extand-now {
    width: 50%;
}

Problem Statement:

If I hit on the search-icon, the small square input box (marked by an arrow in the screen shot) surrounding the search icon should expand similar to here.

Here is my updated fiddle which is working almost right but these two things I am not able to figure out how to do it:

• Square box should come back to the original position after hitting anywhere outside.
• When the white square border expands, the inside background should be white.

Any thoughts on how this can be done?

Answer 1

Here is the updated fiddle link

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   pointer-events:none; /*Add this to ur css*/
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.extand:focus {
  width: 50%;
  background: white;
}
.extand:focus + span{  /*hide icon*/
  display:none;
}

no need to add javascript. On click of input, it gets focused, which can be used in css to target it and add width to it, When u click outside, the input gets unfocused and returns back to original size

Answer 2

i think you do't wont to use javascript, you should depend on focus which can be used in css to target it and add width to it, When u click outside, the input gets unfocused and returns back to original size

input{
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url(https://i.imgur.com/MACjo6S.png);
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input:focus {
    width: 100%;
}

<form>
  <input type="text" name="search" placeholder="Search..">
</form>