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がいじれるようになったら、改善するかも。