HTML5 Search Input: No Background Image in Chrome?

Question

I have been pulling my hair out trying to get Chrome to style my search input with a background image. Firefox has no problem, but I fear it\'s because it treat

Answer 1

You can get Chrome (and Safari) to play along better with your styles on an HTML5 search field (including background images) if you apply this in your CSS:

-webkit-appearance: none;

You may also want to change -webkit-box-sizing to...

-webkit-box-sizing: content-box;

...since it appears that Webkit defaults this to the border-box value (basically the old IE5 box model).

Be warned, there's still no (apparent) way to have any effect on the position/appearance of the field-clearing button, and since only Webkit generates that button, you may find some new cross-browser annoyances to deal with.