HTML and CSS Reference
In-Depth Information
The search input type displays a text input field that may visually differ from that of a
regular text field, based on the stylistic conventions of the platform.
For example, Safari on Mac OS displays the search field with rounded (instead of
square) corners, as shown in Figure 3-1 . Both Safari and Chrome display an icon within
the field to delete the current value, as shown in Figure 3-2 .
Some user agents will display a plain text input field for the search input type, so support
cannot be determined by visual appearance alone.
Testing browser support
To accurately test a browser's support of the search input type (see Table 3-1 for a
listing of compatible browsers), load Mike Taylor's support test page at http://www . The page shows not only support for the
search attribute value, but for other attribute values for input as well.
Table 3-1. Browsers supporting the search input type
10 Platform Preview 2
11.0+ ✓✓
If a user agent does not support the search input type, it will revert to displaying a text
input field. What is the value in having a separate input type for search, when only
some user agents will render a visually different input field? There are a few answers to
this question.
First, enabling visual styles reminiscent of an operating system in the browser can make
for a better user experience. Second, designating a search input field as such may help
assistive devices more correctly signal users as to the purpose of the field or form.
Finally, the search input type gives us a more semantic input type value to use in our
forms and gives us a better hook for our CSS, as compared to using a class or ID. The
following CSS applies rounded corners to the search input field for all user agents that
support the border-radius property:
input[type="search"] {
border-radius: 10px;
See Also
For more information on search inputs in WebKit browsers, including Chrome and
Safari, see .
Search WWH ::

Custom Search