[html/css]検索ボックスをオリジナルの画像で表示させる
公開日:
:
最終更新日:2013/08/06
未分類
デフォルトの検索ボックスといえば・・・
このように味気ないデザインですよね。
やはりサイトの個性を出すには検索ボックスのデザインも変えたいところ。
これは画像に置き換えることにより下図ようないろいろなデザインの検索ボックスにすることができます。( ご自由にお使いください )
それでは検索ボックスをオリジナルの画像でカスタマイズする方法を説明していきます☆
まずは、検索キーワード記入欄の画像を用意します。
つづいて、送信ボタンの画像を用意します。
searchA-2.png
このように2つの画像を用意する必要があります。
それでは、まずはキーワード記入欄の変更です。
デフォルトのソースを見てみましょう。
<input type=”text” name=”sample_name” id=”sample_id” ” size=”20″ />
上のようなソースになっていますが、ここのid=”sample_id”をCSSで指示していきます。
CSSに以下の記述をしてください
#sample_id
{ border: none; // デフォルトではボーダーがついているので消す
background-color: transparent; // デフォルトでは白が入っているので、透明にさせる
background-image: url( パス / searchA-1.png );
background-repeat: no-repat;
padding-left: 7px;
}
つづいて、送信ボタンです。
デフォルトのソースは
<input type=”submit” id=”sample_id” value=”検索開始” />
となっていますが、これを
<input type=”image” src=” パス / search.png” id=”sample_id” value=”" />
以上で完成です☆
ともう1つ、検索ボックスの中の説明( value )をクリックによって表示・非表示にさせる方法を載せておきます。
クリックすると ↓
文字が消えて、また選択が外れると・・・ ↓
復活します☆
やり方はjavascriptをソースに埋め込みます。
デフォルト
<input type=”text” name=”sample_name” id=”sample_id” ” size=”20″ />
↓ ↓ ↓ ↓
<input type=”text” value=” お探しキーワード” name=”sample_name” id=”smple_id” onfocus=”if( this.value == ‘お探しキーワード’ ) { this.value = ”; } “ onblur=”if( this.value == ” ) { this.value = ‘お探しキーワード’; } ” size=”20″ />
と書き換えれば完成です!
ad
関連記事
-
1.グーグルの無料メール(gMail)を取得する
完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する
-
無料のウイルス対策ソフトMicrosoft Security Essentials (マイクロソフト セキュリティ エッセンシャルズ) を使う
今まで使用していたアンチウイルスソフトの期限が切れてしまい、しばらくウイルスソフトなしで使っていたの
-
[Welcart] 注文完了画面をCSSでカスタマイズする
Welcartをオリジナルテンプレートで作成した場合、注文完了画面が下記図のように「送信が完了しまし
-
[Welcart]会員のログイン状態とログアウト状態でリンク先を変える
Welcartでウィジェットのログイン・ログアウト状態によって表示を変えたり、リンク先を変えたりした
-
Adobeのソフトのアイコンが正しく表示されない時の直し方(Photoshop・Illustrator・Flash・Fireworks・Bridge・Extension Manager等)
AdobeのCS6を購入し、インストールしたのですがいくつかのソフトのアイコンが正しく表示されない現
-
[HTML/CSS]classかつclassでセレクタを指定するときの方法(2つ以上複数のclassで指定するとき)
WordPrsssを使っているとbodyクラスが大変便利ですが、トップページもその他ページも「固定ペ
-
未来サーバーの無料で広告が出ないプランでwordpressをインストールしてサイトを作成する方法
未来サーバーの無料で広告が出ないプランででwordpressをインストールしてサイトを作成する方法を
-
3.無料で高機能なアクセス解析Google Analytics(アナリティクス)を設置する
完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する
-
WordPressテーマ「stinger」にはメタキーワードタグとディスクリプションタグが無い!?
SEOにつよいWordpressテーマ「stinger」には、「meta keyword」、「met
-
[Windows7]ファイル拡張子ごとのアイコンを簡単に変更する方法
Windows7 でファイルを拡張子ごとにアイコンを変えたいときの方法です。 たとえば、txtファ