Question

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

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

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

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

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>

在调整大小窗口时返回img按钮位置或旋转移动设备

1 个答案: