w3.orgの右上にあるGoogle検索窓実装方法

質問

http://w3.org/の右上にあるGoogle検索窓はどうやって実現しているのでしょうか？

自分、CSS/JSの知識が３年前で止まっているものでして。

※なぜテキストボックスが角丸にできる？
※なぜテキストブックス内にGoogleロゴと虫眼鏡マークを表示できる？
※なぜテキストボックスにフォーカスを当てるとGoogleロゴが消える？
※なぜ虫眼鏡アイコンをクリックすると、検索実行できる？
っとわからないことばかりです。

あと、これってひょっとしてグーグルがテンプレートとして配ってるのでしょうか？
（とはいえどこで配っているのかあわかりません）

以上、よろしくお願いいたします。、

回答No.1

hanabutako · ベストアンサー

Google Chromeの開発ツールやFirefoxのFirebugを使うとHTMLの要素ひとつひとつに設定されているCSSやJavascriptのアクションがチェックできますので、それで確認してみることをおすすめします。
自分が下に書いたことはChromeの開発ツールで全て調べたことです。

※なぜテキストボックスが角丸にできる？

ChromeやSafariといったWebkit系ブラウザやFirefoxなどGecko系ブラウザにしかないCSS記述を使っています。
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

※なぜテキストブックス内にGoogleロゴと虫眼鏡マークを表示できる？

divで検索ボックスを作ったあとにそれらを加えています。
input要素のCSSに背景Googleロゴを表示するCSSが入っています。
background: white url(../images/google) no-repeat center left

虫眼鏡は画像として張ってあります。

※なぜテキストボックスにフォーカスを当てるとGoogleロゴが消える？

background imageとcolorの両方があると、フォーカスした時にcolorが勝つのではないかと。

※なぜ虫眼鏡アイコンをクリックすると、検索実行できる？

虫眼鏡のimg要素ががbuttonで囲まれているからですね。