検索窓

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; } のように指定する。

コメントをどうぞ

カテゴリー: WordPress

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>