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...
