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 with a particular style in Mobile Safari, 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 must negate the mobile appearance and style in the input to be consistent:

<input type="search" placeholder="search" name="search_string" id=search_string" maxlength="25">

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

input[type=search] {
	-webkit-appearance: textfield;
	font-size: medium;
	background: #fff;
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.