あのサイトのような検索ボックス

検索ボックスのカスタマイズです。JavaScriptでフォーカスのときにスタイルがかわるというのを試してみました。

Movable Typeを使っているかたは、プラグインでお世話になってることの多いMovalog(movalog.com)のデザインですが、グローバルメニューのところに、検索窓があって、フォーカス時に横幅が広がって、視覚的にスタイルが違うことがわかるようになっています。

検索窓がフォーカスされたとき、スタイルシートのclassを切り替えるという仕組みのようでした。

ということで、真似して作ってみましたのですが、IE(IE6）だと、スタイルが切り替わってないもよう。

で、調べたら、「IE の getAttribute / setAttribute: Days on the Moon」にて、getAttribute / setAttributeについてまとめられていました。そんなわけで、IEで動きそうなものということで作ったのが以下のページです。

• 検索ボックスのカスタマイズ
• 検索ボックスのカスタマイズ（2）

最初のほうは、style.cssTextを使って一度にスタイルの書き換えをさせたものです。（２）のほうは、document.getElementByIdを使ってclassの書き換えをしたものです。

どちらがいいかとかいうと、どっちもどっちもいう感じなんですけど、ま小ネタ程度ということで。
＃「:focus擬似クラスがあるじゃない」とかいわれそうなやかん。