Home > BlogTech > Tweak


June 18th, 2005

Are you using Safari? If so, look at the search box on this page. Notice anything about it? Rounded corners, gray placeholder text, the circle-x ‘clear’ button once text has been inserted?

It turns out that Apple created a few new tag features just for Safari, intended for Dashboard widgets, which are based in Safari. The ones I’m using are for the <input> command, namely type=”search” and placeholder=”Go fish!”. The type=”search” attribute is the key one, though–that’s the one that rounds the corner and gives you the circle-x button. And it is invisible to other browsers, so they still see the regular search box–which means 91% of my visitors. So no loss, but a little cool tweak gained with the extra code. Heard about it on Ars Technica (though they don’t seem to like it), and more in detail from Bartelme Design. The “placeholder” attribute, by the way, adds the gray text inside the search box which disappears when you click to type.

So far I’ve applied it to the main page, the individual archive pages, and the search page. What I haven’t figured out yet is how to make the little magnifying-glass icon appear on the left so you can review recent searches…

Update: a helpful member at Ars Technica filled out the answer: in order to get the “recent searches” menu, you have to add both “autosave” and “results” attributes. For example: <input type=”search” autosave=”anyname” results=”5″ placeholder=”Search this site…”> and that would give you all you need for the full search box in Safari, recent-search magnifying glass icon and all. Cool! Now, everybody just switch to Safari, now that you have a reason.

Categories: BlogTech Tags: by
Comments are closed.