画像のサイズを変更したり、モバイルデバイスを回転したりするときの画像の位置を

Question

ここから始めて、tag img position on resize window or rotate mobile deviceから、「検索...」の前に別の画像を追加する必要があります（虫眼鏡は現在OKです）。

デフォルトでは、この2番目の画像（戻るボタン）は非表示になっています。検索入力を押すと、その画像が表示されます。そして、私がエンターを押すと、消えます。

複数の背景を試しましたが、戻るボタンをクリック可能にする方法がわかりません。

私はこれを試しましたが、ウィンドウのサイズを変更したり、モバイルデバイスを回転させたりすると、背面の画像が動いて見栄えが良くなりません。

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>