Safariで検索窓を角丸で表示。


さっき仕事で調べ物をしていたら面白いネタを発見しました。
こういうところがさすが純正アプリだなぁ。

A leaf of PowerBookより
検索窓をSafariだけ角丸に [HTML]
スタイルシートスタイルブックの Safari Web という記事に Safari の form の TEXTフィールドを 左のように角丸にする方法が紹介されていた。方法としては、以下のように書くようだ。という事なので変更してみた。一応、Windows IE6でチェックしてみたが、type="text" と同様にというか、nameの属性があるのでそれと、そのデータを送ってるって事なんだろうけど、Safari以外でも動作しそうだ。
image さっそく仕事をほっぽりだして片づけて改造開始。

おぉ!虫眼鏡アイコンも付いて角丸になって、しかも検索履歴まで表示できちゃうんですね。すばらしい!
こういう細かいところがカスタマイズ可能なのはさすがSafariと言ったところか。
念のためIEでも表示結果を確認…ただの四角だ。ほんとIEってつまんねぇ。

やりかたはとっても簡単。自分で検索窓を付けた人ならちょちょいと出来ちゃいますよ。
FORMタグの検索窓の部分に『type="search" results="5" autosave="任意のキーワード"』を追加するだけ。
任意のキーワードはサイトを識別するためのものなのでサイト名あたりを入れておけばよいかと思います。

分からない人のためにこのサイトで使っているタグをお見せしましょう。
<form action="http://www.google.com/search">
<input type="hidden" value="digicool.org/iblog" name="as_sitesearch" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />
<input type="search" results="5" autosave="theroadahead" name="q" size="20" maxlength="256" style="font-size:10px" onblur="if (value == '') {value = 'サイト内検索'}" onfocus="if (value == 'サイト内検索') {value =''}" value="サイト内検索" /><br />
<input type="submit" name="btnG" value="Search" style="font-size: 10px; " />
</form>

Posted: Fri - September 2, 2005 at 01:44 AM  |   |   |   |  このエントリーを含むはてなブックマーク  | ランキングを見てみる
 




© 2003 M.Kawasaki All rights reserved. Site designed by DIGICOOL