demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

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

css / resets

Estimated reading time: 1 minute, 51 seconds

Default appearance of search input in Webkit (top) vs. Firefox (bottom)

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 , 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:

<input type="search" placeholder="search" 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.

input[type=search] { -webkit-appearance: textfield; font-size: medium; background: #fff; }
::-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:

input[type=search] { font-size: medium; font-size: 14px; border: 1px inset #777; border-radius: 10px; width: 150px; 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:

input[type=search] { -webkit-appearance: textfield; font-size: 12px; border: 2px inset #ccc; border-radius: 10px; width: 150px; background: white; padding: 3px; padding-left: 20px; }
::-webkit-search-cancel-button { display: none; }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.