CSS Fix for HTML5 Search in WebKit

Last week, Chris Coyier wrote a short piece about how WebKit browsers (Safari, Google Chrome) don’t allow certain styling on HTML5 search input elements such as background, text-indent etc and, instead, default to the browsers preferences.

Well, it turns out there is a small fix for this – a small CSS property called -webkit-appearance.

By adding the line -webkit-appearance: none; to your CSS rule, none of the default WebKit styles are inherited and you can apply whatever decorations you want to your Search field.

input[type=search] { color: red; text-align: right; cursor: pointer; display: block; width: 100%; letter-spacing: 4px; text-shadow: 0 0 2px black; word-spacing: 20px; padding: 30px; /* Usually overridden by padding: 1px; */ font-family: Georgia; /* Usually overridden by font: -webkit-small-control; */ border: 5px solid black; /* Usually overridden by border: 2px inset; */ background: #FCF; /* Usually overridden by background: #FFF; */ -webkit-appearance: none; } <input type="search" name="search" /> 

I put together a quick test to show the decorations coming through (open in a WebKit browser for the full effect).

(Hat-tip to Keir Whitaker for publishing an item on Think Vitamin about Styling Submit Buttons on the iPhone which provoked this thought.)