input type=”search”って

新しい会社ではフレーム部分のコーディングとかを任せてもらえるので嬉しいのですが、なんせ経験が浅いので一個一個につまづきながら、泣きそうな毎日を送っています :cry:

今日つまづいたのはフォームの1行テキストフィールドのスタイル。<input type=”text”>って書くやつです。フルCSSでIE5から対応っていうだけでいっぱいいっぱいでしたが、どうにか組み終わってMacでチェックしてみたら問題が発生しました 8O

文字を可変させるとsafariでヘッダー部分の検索窓が落ちてしまう。CSSでは幅と高さをがっつり固定して、WinではIEでもFFでもNNでも問題なく、MacでもFF、NNともに大丈夫だったのに。。。

ほかのサイトはどうやってるんだろうと思って、大規模サイトでヘッダー部に検索窓がついてるサイトを覗いてみたけど、どこも伸びでも大丈夫なデザインをしているか、safariを切り捨ててるっぽい。

ふとhttp://apple.excite.co.jp/を見てみると文字を可変してもテキストフィールドが大きくならないことに気づいて、さっそくソースを見てみました。そしたら、見たこともない値がtype属性に振られていました。

<input type="search">

なんだろうと思って調べてみたら、safariの独自属性で検索窓を表示するものみたいです。ほかのブラウザでは普通のテキストフィールドみたいになって、サファリではよくある虫眼鏡つきのテキストフィールドが現れるみたいです。(↓の画像みたいなやつです。)

んでもって検索履歴をいくつ出すとかの属性は以下の通り :D

autosave
自分のサイト名(他のサイトと区別するための任意の文字列)

results
検索履歴に残す数

placeholder
初期値。検索欄にグレーで表示される文字列

なつみかん。 | Safari限定、input type=”search” より引用

Macなんてブラウザチェックの時にしか見ないけど、実はこんな属性があったんだと初めて知りました。
ただ、構文的にはエラーになっちゃうみたいです。
type=”search”を使わなくてもテキストフィールドの高さを固定できる方法があったらもっといいんですが。。

error:INPUT TYPE の属性値 search は…
なつみかん。 | Safari限定、input type=”search”

Trackback URI: http://blog.ochanocosaisai.com/wp-trackback.php?p=326

気軽に記事を評価してみて下さい。
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4.00 out of 5)
Loading ... Loading ...

コメントする

RSS feed for comments on this post · TrackBack URI · add to hatena hatena.comment 0 user add to del.icio.us 0 user add to livedoor.clip 0 user