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で、おしゃれなテキストボックスを実現するにはどのようにすればよいでしょうか?
どなたかよろしくお願いいたします。

回答の条件
  • 1人2回まで
  • 登録:2007/12/21 12:16:53
  • 終了:2007/12/21 22:46:30

回答(1件)

id:tanukichi800 No.1

tanukichi800回答回数31ベストアンサー獲得回数32007/12/21 11:41:22

ポイント60pt

http://adp.daa.jp/tech/20071020/

Macを持っていないので私はSafariで確認はできないですが、

ページ中で対象ブラウザは「IE6, IE7, Mozilla Firefox, Opera, Safari」となっていますので多分動くと思います。

id:ruijio

ありがとうございます。

でも、こちらの内容だと解決に至りません。

2007/12/21 22:46:11
  • id:ruijio
    調べたところ、本家のITunesのページではjavascriptを使って実現してた模様です。

    恐らく、CSSのbackgroundでは実現できないということでしょうかね。
  • id:tanukichi800
    tanukichi800 2007/12/21 23:07:42
    >調べたところ、本家のITunesのページではjavascriptを使って実現してた模様です。

    Applenoあのフォームそのままの機能を実現するならば、
    「Search」の文字を入れたり消したりとかはJavaScriptが必要かと思います。
    (formに何も文字が入っていない場合は出す・・の判断とか)

    >でも、こちらの内容だと解決に至りません。

    では、
    <div id="yyy"><input type="text" id="zzz"></div>

    #zzz {
    border:0;
    }
    #yyy{
    background:url(画像);
    }
    という方法はどうでしょう?
  • id:michii0307
    これなんか使えませんか?


    http://phpspot.org/blog/archives/2007/08/css_41.html


    サンプルページ
    http://www.reindel.com/spruce_search_box_css/

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません