WordPress標準の検索フォーム「<?php get_search_form(); ?>」は少しあれなので、CSSでカスタマイズする方法。

まずは、WordPressのテンプレート内で<?php get_search_form(); ?>を表示する。

標準の表示がこれ。

カスタマイズしてみる

CSSを下記に設定

#s {
	width:200px; //検索入力欄の幅
	height:25px; //検索入力欄の高さ
	margin-bottom: 30px;
	border-radius: 3px; //角丸効果
	-moz-border-radius: 3px; //角丸効果
	-webkit-border-radius: 3px; //角丸効果
	box-shadow: 0px 0px 5px #aaa; //ドロップシャドウ
	border:none;
	behavior: url(/PIE.htc); //角丸IE対策
	padding:5px;
}
#searchsubmit {
	margin-left: -38px; //虫眼鏡アイコンを中に入れる
	box-shadow: none;
	background-image: url(images/search_icon.png); //虫眼鏡アイコン 25pxの正方形で用意
	background-repeat: no-repeat;
	width: 30px;
	text-indent: -60px; //文字を隠す
	background-color: #FFFFFF;
	background-position: 0px 4px;
	cursor: pointer;
}
.screen-reader-text {
	display: none; //先頭の「検索：」を非表示
}

IE対策用の「PIE.htc」は下記からダウンロードして設置する。

Download PIE – CSS3 PIE: CSS3 decorations for IE

※CSSファイルからの相対パスで指定。
※IE対策が必要なければ設定しなくても可。

CSS設定後の検索フォーム

シャドウの色やボーダーの有無などいろいろ変更すれば、自分好みのフォームが出来ると思います。WordPress標準の検索フォームの見栄えをどうにかしたいという人は試してみてください！