调整窗口大小或旋转移动设备上的后退 img 按钮位置

Question

从这里开始 tag img position on resize window or rotate mobile device ，现在我需要在“搜索...”之前添加另一个图像（如后退按钮）（现在放大镜可以了）。

默认情况下，第二张图片（后退按钮）是隐藏的，当我按下搜索输入时，我想显示它。当我按下回车键时，它就消失了。

我尝试了多个背景，但我不知道如何使后退按钮可点击。

我试过了，但是当我调整窗口大小或旋转移动设备时，后面的图像会移动并且看起来不太好。

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');

      });
   }
});

我该如何解决这个问题？ 谢谢

PS。请原谅我的英语不好。

Answer 1

您可以在 form 元素上使用 flex（这样您就可以摆脱 float）并将您的图像包裹在 a 标记中以使其可点击。

$(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>