Question

Possible Duplicates:
How would I implement stackoverflow’s hovering dialogs?
i want a small box like stackoverflow

did you see the box in the top is each page
i want do one
how

Answer 1

They are doing 2 things:

1) They have a background image which is why the little magnifying glass appears:

#hsearch .textbox {
    background:url("http://sstatic.net/so/Img/search.png") no-repeat scroll left center #FFFFFF;
    border-color:#CCCCCC -moz-use-text-color -moz-use-text-color #CCCCCC;
    border-right:medium none;
    border-style:solid none none solid;
    border-width:1px medium medium 1px;
    margin:0;
    max-width:230px;
    padding-left:16px;
}

2) When you click on the box, if the content says “search”, then it’s blanked out. This is done by simple javascript:

<input name="q" class="textbox" tabindex="1" 
    onfocus="if (this.value=='search') this.value = ''" 
    type="text" maxlength="80" size="28" value="search">