input divで生成されたボックスを削除するには？

Question

私は、送信ボックスの検索ボックスの左側に拡大画像がある検索ボックスを作成しようとしています。私はイメージを得るのに素晴らしいフォントを使用していますが、入力として追加しようとすると、submitと言う別のボックスも表示されます。送信ボックスを削除して、虫めがねをどうやって持つことができるのだろうかと思います。また、絶対位置を使用する以外に、検索バーの中に虫めがねを入れる方法についてのアドバイスも参考になります。ここで

はJSFiddleです：https://jsfiddle.net/ouuxzs05/

HTML：

<div id="searchbar"> 
     <div id="SearchForm"> 
      <aside id="search"> 
       <form action="http://example.com/search.php" method="get" onsubmit="return check_small_search_form()"> 
       <input type="text" name="search_query" id="search_query" class="search-textbox" value="" placeholder="Search Products and Categories"> 
       <input type="image" class="fa fa-search submit-button" src=""> 
       </form> 
      </aside> 

CSS：

#searchbar .search-textbox { 
height:30px; 
position:relative; 
border-radius:8px; 
width:200px; 
margin-left:200px; 
} 

Answer 1

私はbutton、その後、境界線を削除し、backgroundにtranslateX()を使用することになるだろう検索ボックスの上に置いて、右にpaddingを追加して、検索ボックスにextはボタンの下には行かない。

はまた、あなたが使用できるボタンで入力タイプの画像を交換して、検索inputフィールド、ボタンからoutlineを除去し、検索input

#searchbar .search-textbox { 
 
    height: 30px; 
 
    position: relative; 
 
    border-radius: 8px; 
 
    width: 200px; 
 
    margin-left: 200px; 
 
    padding: 0 25px 0 .5em; 
 
    outline: 0; 
 
} 
 

 
button.iconfont { 
 
    border: 0; 
 
    background: transparent; 
 
    transform: translateX(-150%); 
 
    outline: 0; 
 
}

<script src="https://use.fontawesome.com/040e2f1f79.js"></script> 
 

 
<div id="searchbar"> 
 
    <div id="SearchForm"> 
 
    <aside id="search"> 
 
     <form action="http://example.com/search.php" method="get" onsubmit="return check_small_search_form()"> 
 
     <input type="text" name="search_query" id="search_query" class="search-textbox" value="" placeholder="Search Products and Categories"> 
 
     <button type="submit" class="btn btn-success iconfont"> 
 
      <i class="fa fa-search"></i> 
 
     </button> 
 
     </form> 
 
    </aside>

Answer 2

に左paddingを追加しました次のコード。

<button><i class="fa fa-search"></button> 

button{ 
    background:transparent; 
    border:none; 
    text-align:center; 
    margin-left:-20px; 
}