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? :\

Solution 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.

Solution 2

Complete solution to remove all extra design caused by browser. This will change the search field to normal input field

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
input[type="search"]{
  -webkit-appearance: none;
  -webkit-box-sizing: content-box;
  outline:none;
}

Solution 3

The cancel button can be styled with the following

input[type="search"]::-webkit-search-cancel-button {

   /* Remove default */
    -webkit-appearance: none;

    /* Now your own custom styles */
    height: 10px;
    width: 10px;
    background: red;
    /* Will place small red box on the right of input (positioning carries over) */

}

Styling can be removed using

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

http://css-tricks.com/7261-webkit-html5-search-inputs/

Solution 4

Like you said, Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML wrapper for the internal Webcore Cocoa NSSearchField. This is what gives it the round edges and the 'x' button to clear itself when there is text within it. Unfortunately it seems that not only are these extra features inaccessible by CSS/JS for the time being, but it also seems that there's no W3 specification for what CSS properties can be applied to this element as well as other new HTML5 elements. Until there is such a specification I wouldn't expect to have consistent behavior.

View more solutions

Comments

[Ricardo Gomes]

boo... i don't see the round edges you're talking about, but i get what you're saying. SUCKY

[RwwL]

Yeah, I realize I'm probably answering this way too late to be of much help, but I came into this post from a search on a related issue, so presumably someone else might as well...

[Ricardo Gomes]

yeah i saw those properties after a bit of research. i think the workaround is listen for a click on the box and if after the click the value of the box is empty, run code