via 角丸のテキストエリアを表示する input type="search" - webdog
Windows safari でのスクリーンショット
Macのsafariような美しい検索フォームを実現する方法があったので、メモ。
inputタグの type属性を通常のtextではなくsearchに変更するだけで良いみたいです。
さらに検索履歴を残すためのautosave="サイト名等"と履歴表示数のresults="数値"を記述しておくと、まさに検索窓って言うのがすぐ分かるinputエリアの完成です。
ということで以下のコードをHTMLに記述すると...
<input type="search" autosave="webdog" results="5" placeholder="角丸です"/>
このようなテキストエリアになります。
問題点はW3Cおすすめではないということ。
あとは、safariにしか対応していないことでしょうか。
追記:
inputにCSSを指定しているせいかテキストエリアが角丸になってくれません:-S
このBlogの検索部分にも使いたかったのですがどうしてもHTML自体をいじる必要がるため、今のところは見送りです。DOMがいじれるようになったら、改善するかも。
