ah-placeholder.jsを使って入力エリアに入力ヒントを表示します

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="placeholder.js"></script>
$(function()
{
    $('.jq-placeholder').ahPlaceholder({
        placeholderColor : 'silver',
        placeholderAttr  : 'title',
        likeApple        : false
    });
});
</script>

HTMl

<div class="mod_search">
<form action="search.cgi" method="get" id="searchform" >
<p class="srch submit">
<input class="jq-placeholder" title="サイト内検索" type="search" name="search" id="search" value="" />
<input type="image" id="search_btn" src="img/search_btn.jpg" alt="検索" />
</p>
</form>
<!-- mod_search_end --></div>
<p>&nbsp;</p>
<p>[html5]要素type="search"を使用した場合、chromeだとボックス内に×印が表示されてしまします。<br>
type="text"にすることで×は表示されません。</p>
<div class="mod_search">
<form action="search.cgi" method="get" id="searchform" >
<p class="srch submit">
<input class="jq-placeholder" title="サイト内検索" type="text" name="search" id="search" value="" />
<input type="image" id="search_btn" src="img/search_btn.jpg" alt="検索" />
</p>
</form>
<!-- mod_search_end --></div>

CSS

/* input[type="search"]reset｜Safari Chrome Mac */
input[type="search"] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
}
input[type="search"]:focus {
	outline-offset: -2px;
}
input[type="search"]::-webkit-search-decoration {
	display: none;
}
.mod_search{
}
.mod_search form{
	width:270px;
	height:30px;
}
.mod_search input#search{
	width:192px;
	height:31px;
	float:left;
	border:none;
	padding:0 0 0 5px;
	background:transparent url('img/bg_search.jpg') no-repeat left top;
}
.mod_search input#search_btn{
	width:40px;
	height:31px;
	float:left;
}
.mod_search input#search:focus{
	outline:none;　/* Safari Chrome Mac */
}