Tweet

これわりと古くから知られているようですが「input」タグの属性値のみでテキストエリアを角丸にできる方法がありました。

type属性を「text」ではなく「search」に変更するだけ。残念ながらSafari独自の拡張だそうですが、IEやFXなどでは「text」の際と変わりなく表示されます。以下サンプルです。

これはごく普通のテキストエリア

こちらはtype属性を「search」にしたテキストエリア

Safari 以外のブラウザで見てる方のために、以下にGIF画像も用意しました。type属性が「search」だと角丸になるんですね。

さらに、検索した履歴を残すには「autosave="サイト名等"」を、履歴の表示数は「results="数値"」を追記するようです。これをやっておくと虫眼鏡アイコンが表示されます。

テキストエリア内の初期値は「value="ほげほげ"」が優先されますが、「placeholder="ほげほげ"」という記述もできます。「value」と違って薄いグレーの文字色になります。「value」の値が検索履歴に置き換わるから「placeholder」属性が必要になるのかな？

ということで以下のコードをHTMLに記述すると...
<input type="search" autosave="webdog" results="5" placeholder="角丸です"/>

このようなテキストエリアになります。

Safari以外の方のために画像を貼っておくと以下のような形。

上が通常、下が履歴表示。

残念ながらW3Cおすすめではないらしいですが、W3C原理主義者でない方はぜひお試しください。

投稿者 ジェット☆ダイスケ : 2007年12月25日 19:27