REDLINE MAGAZINE | CSSで検索フォームの見た目を変更

CSSで検索フォームの見た目を変更

ネタがなくなってきたので、このブログ内のデザインネタでも。
タイトルの通り、検索フォームをcssで見た目を変えてしまおうという内容。

このエントリの右上部分に検索フォームを置いてるわけですが、とりあえずまずは変更する見た目の画像を用意。私が用意したのはこのinputのテキストフォーム用の画像とその部分のhover時、focus時用の画像(IE6では関係ないんですが)inputのボタン部分の画像の3つ。

　こいつが通常時のフォームの背景画像。

　こいつがhover時、focus時の画像。

　こいつがボタン(のつもり)

元々ボタン代わりの虫眼鏡アイコンはフォーム部分に被せるつもりだったのでそのつもりで書き出し。ということでこんな中途半端な感じの画像になっとります。

XHTMLソース

<div id="searchbox">
<form action="xxxxxx">
<fieldset>
<legend class="none">Search Redline Magazine</legend>
・・・略・・・
<input class="text" type="text" name="q" maxlength="255" value="" />
<input type="submit" value="検索" class="searchbtn" />
</fieldset>
</form>
<!--/searchbox --></div>

CSSソース

まずテキストを入力する部分。#searchboxにはposition:relative;を予め指定してあります。また上のソースの通り、テキストのinputにはclass="text"としてあります。

#searchbox input.text{
	position:absolute;
	top:12px;
	left:300px;
	width:197px;
	height:43px;
	background:url(images/temp/search_bg.gif) no-repeat;
	border:none;
	padding:13px 6px 0px 8px;
	}

html:first-child #searchbox input.text{
	padding:0px 6px 0px 8px;
	}
#searchbox input.text:hover,#searchbox input.text:focus{
	background:url(images/temp/search_bg_o.gif) no-repeat;
	}

こんな感じで、absolute,top,leftは単に位置合わせ。その後、画像に合わせて幅、高さをセットして背景画像を表示。そのままではinputのborderが表示されてしまうのでnoneで消す。その後のpaddingは画像の中央部分でテキストを入力してる感じに持ってくるためにちょこちょこ細工。画像とサイズ次第ではこれは指定しなくてもいけるはず。

html:first-childの部分はOperaでちょっと位置が合わなかったのでハック。単にpaddingの指定をOpera用に上書きしただけ。その下の:hoverと:focusの指定でマウスが上に乗っかったり、フォーカスした時の画像に差替え。

で、続き。ボタン部分のinputにはclass="searchbtn"としてあります。

#searchbox input.searchbtn{
	position:absolute;
	top:15px;
	left:490px;
	width:43px;
	height:43px;
	background:url(images/temp/icon_search.gif) 0px -3px no-repeat;
	border:none;
	text-indent:-9999px;
	cursor:pointer;
	}

html:first-child #searchbox input.searchbtn{
	padding:41px 0px 10px 0px;
	}

ここでもabsolute,top,leftは単に位置合わせ。その後ボタン部分の画像に合わせて幅・高さをセットして背景表示。その後inputのborderとボタン上のテキストをなくす。で、普通の「検索」ボタンじゃなくなるわけで分かりにくいかなーということで、カーソルをpointerに指定。これでアイコン上に来た時にマウスカーソルが指のマークに。

で、ここで問題発生で、Operaではどうしてもボタン上のテキストが消えてくれなくて仕方がないので消すのは諦めてボタン上に乗ってるテキストの位置を下げる事に。html:first-child部分のpadding指定はそのため。

つーことで、Operaだとこんな感じになってるはず。多分。まぁ正直こんな面倒な事しなくてもボタンなしでもEnterキーを押せばいいだけの話なんですが、気分的に。

(070404追記)
このオペラのボタン上テキストについて、コメント欄にて山岸和利さんに「オペラにのみcontent: "";を指定すればよい」と教えていただき、無事解決しました。 山岸さん、ありがとうございます。

デメリットは満載

これをするとCSSが有効、画像無効の場合、なーんにも表示されません。アクセシビリティ重視の方は絶対使えません。後は「虫眼鏡＝検索」という方程式が頭の中にないユーザーの方にはなんのこっちゃ分かりません。

メリットはうまくいった時に自己満足を得られる、デザインにあわせた検索フォームを設置できる･･･くらい。つーことは実用性は低い。単にこういうのやりたかっただけというのが本音。

検証したブラウザはwinでIE6,IE7,Firefox,NN,Opera。macは･･･只今検証中。(友人が)タイミング良く友人のmacが死亡したので検証未。

2007年03月26日 00:00 | Red | パーマリンク