CSSに関して。
iTunes（http://www.apple.com/jp/itunes/）のサイトの右上にあるような、おしゃれなサーチボックスを実装したいと思います。
試してみたのは
<input type="text" id="zzz">
とし、CSS上で
#zzz {
background:url(画像);
border:0;
}
とし、FireFoxやIE6では望むような結果が得られました。
Safaliでは、画像がまったく適用されず、普通のフォーム部品となってしまいます。
FireFox,Safali,Ie6,Ie7で、おしゃれなテキストボックスを実現するにはどのようにすればよいでしょうか？
どなたかよろしくお願いいたします。
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
ログインして回答する
みんなの回答
-
tanukichi800
満足60pt
http://adp.daa.jp/tech/20071020/
Macを持っていないので私はSafariで確認はできないですが、
ページ中で対象ブラウザは「IE6, IE7, Mozilla Firefox, Opera, Safari」となっていますので多分動くと思います。
-
ruijio
-
ruijioこの質問へのコメント
質問の情報
- 登録日時
- 2007-12-21 12:16:53
- 終了日時
- 2007-12-21 22:46:30
- 回答条件
- 1人2回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
親族（実家）の犬が無駄吠えをしています。朝方に一時間くらい吠えているらしい。昼にも一時間くらい吠え続…
匿名質問者
1
1
-
東京都は山に四方を囲まれています。風水的にはどうですか？。匿名質問者1
-
誰か読んでくれませんか？ ゲームの話です アンダーテールっていうんですけど 話し相手が全然いないんです…
yun_1024
-
スマホ（アンドロイド）に、TypeAppを入れております。登録になっているメアドのいくつかを削除したいので…匿名質問者
1
-
アスペルガー精神3級会社員男性(34歳独身)です。 元々眠りが浅いのに最近尚更深刻な夢や深く考え過ぎる夢を…
hayakushinene
恐らく、ＣＳＳのbackgroundでは実現できないということでしょうかね。
Applenoあのフォームそのままの機能を実現するならば、
「Search」の文字を入れたり消したりとかはJavaScriptが必要かと思います。
（formに何も文字が入っていない場合は出す・・の判断とか）
＞でも、こちらの内容だと解決に至りません。
では、
<div id="yyy"><input type="text" id="zzz"></div>
#zzz {
border:0;
}
#yyy{
background:url(画像);
}
という方法はどうでしょう？
http://phpspot.org/blog/archives/2007/08/css_41.html
サンプルページ
http://www.reindel.com/spruce_search_box_css/