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 treats the input as a regular text input. Is this simply not possible?

Try this as a demo:

<input type="search" />

​input[type="search"] {
background: transparent 
    url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}​​​​​​

If it worked correctly, it should put Google's logo (or part of it) as the background image for the "Search" input. But as you will see when you look at this in Chrome, it DOES NOT WORK. Any ideas, or is this just one of HTML5's quirks? :\

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.