Q:

back img button position on resize window or rotate mobile device

Starting here tag img position on resize window or rotate mobile device , now I need to add another image (like a back button), before "Search..." (the magnifying glass is now ok).
Default, this second image (back button) is hidden, and when I press the Search input, I want to show it. And when I hit enter, disappears.
I tried to multiple backgrounds, but I don't know how to make the back button clickable.
I tried this, but when I resize the window or when I rotate the mobile device, the back image move and does not look good.
HTML:
     ...
<div id="input_search">
      <form method="post">
       <input type="text" name="search" id="search" maxlenght="50" value="" placeholder="Cautati...">
      </form>
      <img id="back" src="img/back.png">
     </div>
...

CSS:
#input_search input {
  background-color: #ffa366;
  color: black;
  padding: 15px 0px;
  float: left;
  border: 0px;
  font-size: 16px;
  margin: 1% 0px 1% 0px;
  width: 100%;
}

#search {
  background-image: url('/img/loupa.png');
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: right 7px bottom 11px;
}

.indent1 {
   text-indent: 17px;
}

.indent2 {
   text-indent: 57px;
}

#back {
   float: left;
   position: relative;
   display: none;
   height: 24px;
   margin-top: -11%;
   margin-left: 1%; 
}

JS:
$(document).ready(function() {
   $('#input_search #search').addClass('indent1');
});

$('#search').click(function() {
  $('#input_search #search').removeClass('indent1');
  $('#input_search #search').addClass('indent2');
  $('#back').show();
});

$('#search').keypress(function(event) {
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if(keycode == '13') {
      $( function() {
         $('#back').hide();
         $('#search').removeClass('indent2');
         $('#input_search #search').addClass('indent1');

      });
   }
});

How can I fix this also?
Thank you
PS. Please, excuse my bad English.

A:

You can use flex on your form element (that way you can get rid of float) and wrap your image inside an a tag to make it clickable.

$(document).ready(function() {
   $('#input_search #search').addClass('indent1');
});
$('#search').click(function() {
  $('#input_search #search').removeClass('indent1');
  $('#input_search #search').addClass('indent2');
  $('#back').show();
});
$('#search').keypress(function(event) {
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if(keycode == '13') {
      $( function() {
         $('#back').hide();
         $('#search').removeClass('indent2');
         $('#input_search #search').addClass('indent1');

      });
   }
});
#input_search input {
  background-color: #ffa366;
  color: black;
  padding: 15px 0px;
  border: 0px;
  font-size: 16px;
  margin: 1% 0px 1% 0px;
  width: 100%;
  display:inline-block;
}
#input_search form {
  width: 100%;
  background-color: #ffa366;
  display:flex;
  align-items:center;
  padding:0 5px;
}
#search {
  background-image: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg');
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: right 7px bottom 11px;
}
.indent1 {
   text-indent: 17px;
}
.indent2 {
   text-indent: 17px;
}
#back {
   position: relative;
   display:none;
   height: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="input_search">
      <form method="post">
        <a href="#"><img id="back" src="http://images.financialexpress.com/2015/12/Lead-image.jpg"></a>
       <input type="text" name="search" id="search" maxlenght="50" value="" placeholder="Cautati...">
      </form>
      
     </div>

