Forcing A Consistent Appearance For the HTML5 Search Input Across All Browsers

As a general rule, the question “should websites appear the same in every browser?” can be answered authoritatively and succinctly. However, when it comes to some of the new HTML5 form elements, different browsers have very different ways of rendering inputs, to such a degree that their default appearance may clash with your overall design. This is especially true for the search input, which is provided an “iTunes / OS X” style in Safari and Chrome by default, but appears as a standard text input in other browsers. If you wish to have the search input to have consistent look and feel, you have two choices: negate the default Webkit appearance, or customize the appearance of the search input so that it duplicates the Webkit look across all browsers.

We’ll be applying both options to the same basic markup:

1. <input type="search" placeholder="search"
2. name="search_string" id=search_string" maxlength="25" />

Option 1: Remove the default Webkit appearance from Safari and Chrome

Probably the easiest option of the two, and an approach we have covered in the past with CSS3 & HTML5 Resets. Webkit uses two proprietary CSS properties to customize the appearance of the search input; you have to use those, together with the correct values and attribute selectors, to remove the default appearance.

1. input[type=search] {
2. -webkit-appearance: textfield; font-size: medium; background: #fff;
3. }
4. ::-webkit-search-cancel-button { display: none; }

You could then build the input to a shared, consistent appearance across all browsers by adding style rules to the first declaration.

Option 2:> Duplicate the appearance of the basic search input under Webkit for other browsers.

Slightly more complex than the first option, but certainly achievable. I would recommend starting with something like the following:

1. input[type=search] { font-size: medium; font-size: 14px;
2. border: 1px inset #777; border-radius: 10px; width: 150px;
3. background: white; padding: 3px; padding-left: 20px; }

Rendered as a search input in Webkit, Chrome and Safari will ignore everything after font-size: medium. Alternatively, you could hybridize both techniques to achieve even more visual consistency. In this version, I’ve added proprietary support for border-radius to cover earlier browsers:

1. input[type=search] {
2. -webkit-appearance: textfield; font-size: 12px;
3. border: 2px inset #ccc; -moz-border-radius: 10px;
4. -webkit-border-radius: 10px; border-radius: 10px; width: 150px;
5. background: white; padding: 3px; padding-left: 20px; }
6. ::-webkit-search-cancel-button { display: none; }