トップページ > IT, Internet, Mac, ブログ > 角丸のテキストエリアを表示する input type="search"
カスタム検索

角丸のテキストエリアを表示する input type="search"

検索フォームのテキストエリアを角丸にして、さらに虫眼鏡アイコンまで表示する方法。(でもSafariのみ)



Clip to Evernote


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

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

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

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

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

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

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

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

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

Safari以外の方のために画像を貼っておくと以下のような形。
角丸テキストエリア
上が通常、下が履歴表示。

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



Clip to Evernote



投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2007年12月25日 19:27

コメント:

このエントリーのトラックバックURL:

このエントリーを参照してないトラックバックは削除する場合があります

Related Posts Plugin for WordPress, Blogger...

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 そしてGoogle Plusはこちらにどうぞ。また、YouTubeのチャンネル登録はこちらからできます。

なんかいいアイテム


ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー

AMN