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

Question

从这里开始在调整窗口大小或旋转移动设备上标记 img 位置，现在我需要在“搜索...”之前添加另一个图像（如后退按钮）（放大镜现在可以）。

默认情况下，第二个图像（后退按钮）是隐藏的，当我按下搜索输入时，我想显示它。 当我点击进入时，消失了。

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

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

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

      });
   }
});

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

附注。 请原谅我的英语不好。

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>