Text in Search Control

[TomTees]

There is a website I recently visited that have a "Search" control/field where you can search their website.

What is neat about it, is that it has the words "Search Site" inside of the control.

Moreso, it even has a little maginifying glass inside it like O-

(Very clever!!)

How do you do that?

(It is a great way to save space for tiny spaces!!)


TomTees

[clairs]

There are ways of doing that with CSS and JS, but the new-fangled HTML-only way of doing it (which isn't cross browser yet) is:
<input type="search" placeholder="Search Site" />

[AtSea webdesign]

I actually did the magnifying glass deal.

Search: <input id="UDSearchField" class="searchBox" name="q" size="24" onfocus='javascript: document.getElementById("UDSearchField").setAttribute("class", "");' onblur='javascript: document.getElementById("UDSearchField").setAttribute("class", "searchBox");' maxlength="256" value="" type="text" />

and the css

#UDSearchField {font: 11px Arial, Helvetica, Verdana, sans-serif;height: 12px;margin: 4px 0 0 0;padding:2px 5px 3px;border: 1px solid #7F9DB9;outline-style: none;}
.searchBox{background:url('/images/icon_magglass.gif') no-repeat; padding-left:20px;}

essentially what happens is the mag glass is there until you click in the field.