How to use -webkit-appearance: searchfield-results-decoration?

Question

Happy holidays, all. I'll probably feel very silly when I get the answer to this, but I'd like to know how to use the CSS "-webkit-appearance: searchfield-results-decoration" rule to draw a small magnifying glass inside a search box.

I'd like to create a search box like the one in the upper right corner of apple.com. It should have rounded corners, a magnifying glass icon, and a cancel/clear button that appears once the user starts typing. I can get most of the way there with

<input type="search" />

but this lacks the magnifying glass icon. I also know I can style an input element with "-webkit-appearance: searchfield" but this just seems to make the rounded corners without the proper left/right padding, icon, or cancel button.

I only care about this working in Webkit since it will be used in a Cocoa WebView. I don't need markup for IE, Firefox, Opera, etc.

Answer 1

I don't know about Webkit specific CSS, but in normal CSS the background image would work like this:

style="background-image: url(glass.gif); 
       background-repeat: no-repeat; 
       background-position: left center;
       padding-left: 16px"

The "cancel" button, if there's no Webkit specific command for that, you will need Javascript for. You could work with "position: relative; left: -16px" to place the button next to the input field, and move it to the left to make float over the input field.

Answer 2

To get the magnifying glass, you need to add resutls="0" to the search. If you set results to a larger value, like results="5", for instance, the magnifying glass will turn into a drop down menu that can be used to select previously used search terms. You can also add placeholder text, if you don't want to have a separate label but instead use a placeholder that disappears when you focus the control.

<input type="search" results="0" placeholder="Search">