Hi, I'm using the following code to generate a search box on my blog. Can anyone tell me how I amend this so that the word 'search' will appear in the box. I'm not bothered about the word dissparearing when a user clicks in the box, as I know this involves java or something... but I'd like the word styled in italics and coloured pale grey (#ccc maybe.). It would be extremly helpful if someone could just add to the below text so that I can simply copy/paste.

<form id="searchthis" action="/search" style="DISPLAY: inline" method="get"><input id="search-box" style="BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; FONT-SIZE: 10px; MARGIN: 0px 0px 0px 0px; BORDER-LEFT: #cccccc 1px solid; COLOR: #444444; BORDER-BOTTOM: #cccccc 1px solid" name="q" size="25" type="text/"/></form>

Thanks in advance.

Just needed to add the 'value' to the input like this:

<form id="searchthis" action="/search" style="DISPLAY: inline" method="get"><input id="search-box" value="Search" style="BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; FONT-SIZE: 10px; MARGIN: 0px 0px 0px 0px; BORDER-LEFT: #cccccc 1px solid; COLOR: #444444; BORDER-BOTTOM: #cccccc 1px solid" name="q" size="25" type="text/"/></form>

Btw, you should use the code or quote tags, it makes it much easier to examine.

Hth

Thanks very much, Brian. Very much appreciated. Will remember to use quote tags next time.

I know you weren't asking for this, Billy, but it is so simple to add the JS to clear the default text . . . . and really, it is SO MUCH more user friendly:

Just add a little line of JS to the onfocus element:

<form id="searchthis" action="/search" style="DISPLAY: inline" method="get">
<input name="q" size="25" id="search-box" value="Search" style="MARGIN: 0; 
BORDER: #cccccc 1px solid; FONT-SIZE: 10px; COLOR: #444444" 
onfocus="document.searchthis.q.value='';"/>
</form>

BTW, your type="text/" is invalid; need to remove the slash. Or, you could just skip that element as the text type is default.

I also simplified your CSS, as you don't need border-top, border-right, border-bottom & border-left if they are all the same; just use border. Similarly, you could just use margin: 0; if you want not margin all the way around.