jQuery（とCSS）を使って検索ボックスをデザインしてみました。

View Demo

jQueryを使わず、単純にCSSを使うだけでも良かったのですがjQueryを使った理由は以下の通りです。

• CSS有効で画像をオフにしたら何も表示されなかった
• submitボタンの背景に画像を使用するため、valueの値を空にしないとvalueの値が見えてしまう。valueの値を空にすると、CSSをオフにした状態でsubmitボタンにテキストが何も表示されなくなる。※
  ※inputのtypeをimageにすれば問題無。画像をオフにしたでも実行フォームが表示される。

<input type="submit">のvalue属性に"search"を入れた場合、searchの文字が見えてしまう。

value属性の値を空にするとCSSオフの状態でsubmitボタンの文字が表示されなかった。

CSS有効で画像オフの場合何も表示されなかった。

jQueryで無くても良いのかもしれませんが、なんせ普通のJavaScriptが書けないもので。
jQuery部分のコードは次の通りです。

$(function()
{
	$("div#searchBox form").addClass("searchForm");
	$("div#searchBox input[type='text']").addClass("inputWords");
	$("div#searchBox input[type='submit']").attr("value", "").addClass("searchButton").css("cursor", "pointer");
	$("div#searchBox input[type='submit']").hover(function()
	{
		$(this).addClass("searchButtonOn");
	},function()
	{
		$(this).removeClass("searchButtonOn");
	});
});

単純なスクリプトです。
3行目のaddClassでformタグに.searchFormを付加。
4行目のaddClassでinput[type="text"]タグに.inputWordsを付加。
5行目はattrでinput[type="submit"]タグのvalue要素を空にします。続いてaddClassで.searchButtonを付加、カーソルをマウスポインタにするCSSを付け加えます。
6行目からはhoverイベントで検索ボタンのロールオーバーの設定を行います。

HTML Code

<div id="searchBox">
<form method="get">
<input type="text"　name="search" id="search" />
<input type="submit" value="search" />
</form>
</div>

jQueryが有効になると上記コードは下記コードに書き変わります。

<div id="searchBox">
<form method="get" class="searchForm">
<input type="text" name="search" id="search" class="inputWords" />
<input type="submit" value="" class="searchButton" />
</form>
</div>

CSS Code

<style type="text/css">
div#searchBox { margin: 10px auto; }
form.searchForm {
	width: 250px;
	height: 25px;
}
form.searchForm input {
	float: left;
	display: block;
	overflow: hidden;
}
form.searchForm input.inputWords {
	margin: 0;
	padding: 5px 5px 0;
	border: none;
	background: url(img/bg_input-text01.png) no-repeat 0 0;
	width: 183px;
	height: 20px;
}
form.searchForm input.searchButton {
	border: none;
	background: url(img/btn_search01.png) no-repeat 0 0;
	width: 57px;
	height: 25px;
}
form.searchForm input.searchButtonOn { background: url(img/btn_search01_on.png) no-repeat 0 0; }
</style>

デモをダウンロード出来るようにしてあります。

Download