Styling search input types in HTML5

For some strange reason, Safari likes to hijack the styles of an input with type=”search” in HTML5. It makes them appear all ‘Apple OS’ like. It can be very annoying, and until recently, I thought it was very un-avoidable.

Fret not my dear CSS legends! You too can take back control and keep your forms semantic-ly friendly by adding this nice piece of CSS to your stylesheet!

input[type="search"] { -webkit-appearance: textfield; }

That will give you back control of your input field and allow you to create a wonderfully styled search input.

Go TEAM!

UPDATE: This is just for webkit browsers for now (chrome, safari, google chrome, etc.).  I assume that if browsers start to render search fields differently, then the css would become

input[type="search"] { appearance: textfield; }

Comments are closed.