How to remove box generated by input div? - html

Question

I am trying to make a search box that for the submit button has a magnifying image on the left of the search box. I am using font awesome to get the image, but when I try to add that in as an input I also get a different box that says submit. I am wondering how I can remove the submit box and just have the magnifying glass. Also, any advice on how to get the magnifying glass to be inside of the search bar besides using absolute positioning would be helpful.
Here is the 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

I would make that a button, then remove the border and background, use translateX() to put it over the search box, and add a right padding to the search box so the text doesn't go under the button.
Also removed the outline from your search input field, the button, and added a left padding to the search 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

Replace the input type image with a button you can use following code.
<button><i class="fa fa-search"></button>
button{
background:transparent;
border:none;
text-align:center;
margin-left:-20px;
}