How do I remove a field generated with an input div?
I am trying to create a search box that for a submit button has a magnifying image to the left of the search box. I am using font awesome to get the image, but when I try to add that as input I also get another box that says submit. I am wondering how I can remove the submit field and just increase the magnifying glass. Also, any advice on how to get the magnifying glass inside the search bar other than using absolute positioning would be helpful.
Here's a 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;
}
source to share
I would do this button
and then remove the border and background
, use translateX()
to put it in the search box, and add the right padding
one to the search box so that the text doesn't go under the button.
Also removed outline
from the search box input
, the button and added the left one padding
to the searchinput
#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>
source to share