Search Form in Responsive Design - Remove Search button on Mobile
- by Kevin
I'm working with a search box in the header of a responsive website.
On desktop/tablet widths, there's a search input field and a styled 'search' button to the right. You can type in a search term and either click 'SEARCH' button or just hit enter on the keyboard with the same result.
When you scale down to mobile widths, the search input field fills the width of the screen. The submit button falls below it. On a desktop, clicking the button or hitting enter activate the search.
On an actual iphone phone, you can hit the 'SEARCH' button, but the native mobile keyboard that rises from the bottom of the screen has a search button where the enter/return key would normally be. It seems to know I'm in a form and the keyboard automatically gives me the option to kick off the search by basically hitting the ENTER key location....but it says SEARCH.
So far so good. I figure I don't need the button in the header on mobile since it's already in the keyboard. Therefore, I'll hide the button on mobile widths and everything will be tighter and look better. So I added this to my CSS to hide it in mobile: #search-button {display: none;}
But now the search doesn't work at all. On mobile, I don't get the option in the keyboard that showed up before and if I just hit enter, it doesn't work at all. On desktop at mobile width, hitting enter also not longer works.
So clearly by hiding the submit/search button, the phone no longer gave me the native option to run the search. In addition, on the desktop at mobile width, even hitting enter inside the search input box also fails to launch the the search.
Here's my search box:
<form id="search-form" method="get" accept-charset="UTF-8, utf-8" action="search.php">
<fieldset>
<div id="search-wrapper">
<label id="search-label" for="search">Item:</label>
<input id="search" class="placeholder-color" name="item" type="text" placeholder="Item Number or Description" />
<button id="search-button" title="Go" type="submit"><span class="search-icon"></span></button>
</div>
</fieldset>
</form>
Here's what my CSS looks like:
#search-wrapper {
float: left;
display: inline-block;
position: relative;
white-space: nowrap;
}
#search-button {
display: inline-block;
cursor: pointer;
vertical-align: top;
height: 30px;
width: 40px;
}
@media only screen and (max-width: 639px) {
#search-wrapper {
display: block;
margin-bottom: 7px;
}
#search-button {
/* this didn't work....it hid the button but the search failed to load */
display: none;*/
}
}
So.....how can I hide this submit button when I'm on a mobile screen, but still let the search run from the mobile keyboard or just run by hitting enter when in the search input box.
I was sure that putting display:none on the search button at mobile width would do the trick, but apparently not.
Thanks...
