[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
関連記事
-
[WordPress]ContactForm7をオリジナルページで表示させる方法
大変便利なプラグインContactForm7ですが、通常の設置方法は の を投稿ページや固定
-
[Welcart] 注文完了画面をCSSでカスタマイズする
Welcartをオリジナルテンプレートで作成した場合、注文完了画面が下記図のように「送信が完了しまし
-
[WordPress]WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる
WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる方法 &n
-
Adobeのソフトのアイコンが正しく表示されない時の直し方(Photoshop・Illustrator・Flash・Fireworks・Bridge・Extension Manager等)
AdobeのCS6を購入し、インストールしたのですがいくつかのソフトのアイコンが正しく表示されない現
-
1.グーグルの無料メール(gMail)を取得する
完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する
-
完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する方法
完全に無料でWordPress(ワードプレス)サイトを作る手順を書きます。 目次 グー
-
2.ワードプレスが使えて、広告の表示が無い無料レンタルサーバーwkey.meでサイトを作る
完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する
-
[Photoshop]透過画像のふちをきれいに書き出し保存する
フォトショップ(Photoshop)で作成した透明部分がある、見出しアイコン用の透過画像を作成しまし
-
無料のウイルス対策ソフトMicrosoft Security Essentials (マイクロソフト セキュリティ エッセンシャルズ) を使う
今まで使用していたアンチウイルスソフトの期限が切れてしまい、しばらくウイルスソフトなしで使っていたの
-
[Welcart]複合検索をチェックしたもの全て表示させる
Welcartの複合検索はデフォルトではチェックしたすべてに当てはまらないとヒットしないようになって