Home/ Questions/Q 514147
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T07:29:40+00:00

Happy holidays, all. I’ll probably feel very silly when I get the answer to

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">
    • 0