検索窓

WordPress を使っているサイトを見てまわると、サイドバーに記事の検索を行なうための窓があることがしばしばある。単語を入力する窓はあっても submit のボタンがないこともあり、ああそれでもいいんだっけなどと思っていた。

「検索」ボタンがなくフォームだけがポッカリ開いていると、それが何を意味しているのかわからないので、そのフォームに「Search…」などと表示させておきたい。しかも単語を入力するときにはその表示を消したい、と思って調べたのでメモしておく。

見つけたこの例の type=”search” は Mac の Safari 限定なので普通は type=”text” にする。ついでに文字の色を変化させる。

<input type="text" name="s" id="s" onfocus="if(this.value=='(検索)'){this.className='word'; this.value='';}" onblur="if(this.value==''){this.className='prompt'; this.value='(検索)';}" class="prompt" value="(検索)" />

文字の色はスタイルシートで、入力される検索語をクラス word で、「(検索)」と表示させるときをクラス prompt で、

input.prompt { /* 入力を促す Search... など(フォーカスすると消える)の色 */
	color: #999999;
}
input.word { /* 検索語の色 */
	color: #000000;
}

のように指定する。