検索窓をカスタマイズする。

入力フォームの背景に画像を使って入力ヒントを表示しています。

ヘッダーで、jquery.jsと後述の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>

[placeholder.js]JavaScript

$(function(){
 $('input#search')
  .focus(function() { $(this).css({
	background:"none"
		}
		) })
  .blur(function() { if ($(this)[0].value == '') { 
	$(this).css({
	 background:"transparent url('img/bg_searchinner.gif') no-repeat 8px 5px"
		}
		) } });
});

HTMl

<div class="mod_search">
<form action="search.cgi" method="get" id="searchform" >
<p class="srch submit">
<input 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 p{
	height:31px;
	background:transparent url('img/bg_search.jpg') no-repeat left top;
}
.mod_search form{
	width:270px;
	height:30px;
}
.mod_search input#search{
	width:192px;
	height:31px;
	line-height:30px;
	float:left;
	border:none;
	padding:0 0 0 5px;
	background:transparent url('img/bg_searchinner.gif') no-repeat 8px 5px;
}

.mod_search input#search_btn{
	width:40px;
	height:31px;
	float:left;
}
.mod_search input#search:focus{
	outline:none;　/* Safari Chrome Mac */
}