jQueryを使って検索ボックスをデザイン

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

View Demo

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

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

searchbox_ex01.jpg

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


searchbox_ex02.jpg

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


searchbox_ex03.jpg

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


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

  • code
  • source
  1. $(function()

  2. {

  3. 	$("div#searchBox form").addClass("searchForm");

  4. 	$("div#searchBox input[type='text']").addClass("inputWords");

  5. 	$("div#searchBox input[type='submit']").attr("value", "").addClass("searchButton").css("cursor", "pointer");

  6. 	$("div#searchBox input[type='submit']").hover(function()

  7. 	{

  8. 		$(this).addClass("searchButtonOn");

  9. 	},function()

  10. 	{

  11. 		$(this).removeClass("searchButtonOn");

  12. 	});

  13. });

$(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

  • code
  • source
  1. <div id="searchBox">

  2. <form method="get">

  3. <input type="text" name="search" id="search" />

  4. <input type="submit" value="search" />

  5. </form>

  6. </div>

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

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

  • code
  • source
  1. <div id="searchBox">

  2. <form method="get" class="searchForm">

  3. <input type="text" name="search" id="search" class="inputWords" />

  4. <input type="submit" value="" class="searchButton" />

  5. </form>

  6. </div>

<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

  • code
  • source
  1. <style type="text/css">

  2. div#searchBox { margin: 10px auto; }

  3. form.searchForm {

  4. 	width: 250px;

  5. 	height: 25px;

  6. }

  7. form.searchForm input {

  8. 	float: left;

  9. 	display: block;

  10. 	overflow: hidden;

  11. }

  12. form.searchForm input.inputWords {

  13. 	margin: 0;

  14. 	padding: 5px 5px 0;

  15. 	border: none;

  16. 	background: url(img/bg_input-text01.png) no-repeat 0 0;

  17. 	width: 183px;

  18. 	height: 20px;

  19. }

  20. form.searchForm input.searchButton {

  21. 	border: none;

  22. 	background: url(img/btn_search01.png) no-repeat 0 0;

  23. 	width: 57px;

  24. 	height: 25px;

  25. }

  26. form.searchForm input.searchButtonOn { background: url(img/btn_search01_on.png) no-repeat 0 0; }

  27. </style>

<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