WordPressを使っているサイトを見てまわると、サイドバーに記事の検索を行なうための窓があることがしばしばある。単語を入力する窓はあってもsubmitのボタンがないこともあり、ああそれでもいいんだっけなどと思っていた。
「検索」ボタンがなくフォームだけがポッカリ開いていると、それが何を意味しているのかわからないので、そのフォームに「Search…」などと表示させておきたい。しかも単語を入力するときにはその表示を消したい、と思って調べたのでメモしておく。
[[http://fb.skr.jp/bowz/archives/001990.html|見つけたこの例]]の type=”search” は MacのSafari限定なので普通は type=”text” にする。ついでに文字の色を変化させる。
文字の色はスタイルシートで、入力される検索語をクラス word で、「(検索)」と表示させるときをクラス promptで、
input.prompt { /* 入力を促す Search... など(フォーカスすると消える)の色 */
color: #999999;
}
input.word { /* 検索語の色 */
color: #000000;
}
のように指定する。