48

I've noticed navigating in websites like Dell or Google, that typing in their search text box with iPhone, in the keyboard appears a blue button 'Search' instead of the standard 'Go' button that appears on any normal form.

What should you do to display the search button?

CrazyTim
  • 6,695
  • 6
  • 34
  • 55
Javier Marín
  • 2,166
  • 3
  • 21
  • 40

7 Answers7

107

having type="search" is usually all you need to make software Search keyboard appear however in iOS8 it is mandatory to have a wrapping form with action attribute.

So the following code would have a software keyboard with “Return” button

<form>
    <input type="search" />
</form>

But this code should have blue “Search” button instead

<form action=".">
    <input type="search" />
</form>
Anton Bielousov
  • 1,954
  • 2
  • 13
  • 11
  • 3
    Setting `type=search` has negative UX side effect in Chrome iOS of rounding search input field corners. Hate when browsers start making UI design decisions for me. – demisx Mar 19 '15 at 06:49
  • 2
    @demisx you can (and probably always should) reset default browser styling in your CSS: `[type="text"], [type="search"] { -webkit-appearance: none; }` and don't mix functionality with styling. – Anton Bielousov Feb 20 '17 at 17:24
  • 2
    This should be the correct answer because, for whatever inane reasons, Apple doesn't give you the Search mask unless you include the form's action attribute.Without it, the type attribute is moot. – Stonetip Aug 09 '17 at 21:52
  • 2
    @Stonetip This answer came years later, likely as an updated solution when iOS 8 added the requirement to have an `action` attribute for the "Search" label to display on the on-screen keyboard. So by today's standards, definitely a better answer, but not necessarily when the question was posed in early 2011. – dmbaughman Dec 27 '17 at 22:37
  • are the any issues (in any browser) with this action="."? – akcasoy Jun 24 '21 at 08:38
  • 2
    Answer is still valid for iPhone 12. – Vincente Jun 30 '21 at 09:23
37

You can influence this behaviour with:

<input type="search" />

JS Bin demo

Ignore the submit button's text being 'kettle,' I just wanted to be sure that it wasn't the submit button influencing the text of the iOS keyboard...

This is, of course, backwards compatible since a browser that doesn't understand type="search" will default to type="text", which is useful for creating forward-planning html5 forms.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • Any idea why it works on this site though? http://www.mobilecityonline.com/ Checked source on iPhone, and it is not using input with type=search. – einarq Nov 21 '11 at 11:22
  • 5
    To answer my own comment, it seems iPhone also displays "Search" on the keyboard if the name of the textbox also contains the word "search" in it. Havent tested Android. – einarq Nov 22 '11 at 21:18
  • The `id` of the element had to contain search to make it work in Chrome, then to make it work on iPhone and iPad, I had to place the `input` within a `
    `.
     – sshow Mar 12 '14 at 09:55
  • 11
    That form also needs to have the `action` attribute. I have tested this on iOS 9.3.1 – evolutionxbox May 06 '16 at 11:38
30

I was not able to get the search button with

<input type="search" />

However, I did get it to appear with 

<form>
    <input name="search" />
</form>
Tim
  • 420
  • 5
  • 9
5

In HTML5 standard, adding enterkeyhint attribute on the input is the proper way to change the label on the virtual keyboard


<input enterkeyhint="search" />

If no enterkeyhint attribute is provided, the user agent might use contextual information from the inputmode, type, or pattern attributes to display a suitable enter key label (or icon).

See MDN Docs about enterkeyhint

Joel Raju
  • 1,210
  • 2
  • 18
  • 21
4

On iOS 8 you can enable the blue "Search"-button on the keyboard by doing one of:

  • add input name=search
  • add input type=search
  • add id to input with the case sensitive word "search" in the ID, for example the-search or thesearchgod
dillqvist
  • 49
  • 1
1

When using @Anton Bielousov suggested solution, this also changes the styling of Android Devices. To counter this I had to:

  • Add form around input.
  • Add type="search"
  • Add name containing search
  • Add styling to counter the unwanted android styling

Android styling:

input[type=search] { -webkit-appearance: none; }
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
<form action="" class="search-bar__form-form">
  <input
    class="search-bar__input"
    name="search-bar"
    type="search"
  />
</form>
Sebastian Johansson
  • 69
  • 4
-1

The keyboard is handled by the operating system (iOS) and cannot be directly altered. The type of input required determines the type of keyboard to display.

If the website in question is HTML5, then @David's answer is valid.

Evan Mulawski
  • 54,662
  • 15
  • 117
  • 144