[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
関連記事
-
[Windows7]ファイル拡張子ごとのアイコンを簡単に変更する方法
Windows7 でファイルを拡張子ごとにアイコンを変えたいときの方法です。 たとえば、txtファ
-
無料のウイルス対策ソフトMicrosoft Security Essentials (マイクロソフト セキュリティ エッセンシャルズ) を使う
今まで使用していたアンチウイルスソフトの期限が切れてしまい、しばらくウイルスソフトなしで使っていたの
-
1.グーグルの無料メール(gMail)を取得する
完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する
-
[HTML/CSS]classかつclassでセレクタを指定するときの方法(2つ以上複数のclassで指定するとき)
WordPrsssを使っているとbodyクラスが大変便利ですが、トップページもその他ページも「固定ペ
-
Adobeのソフトのアイコンが正しく表示されない時の直し方(Photoshop・Illustrator・Flash・Fireworks・Bridge・Extension Manager等)
AdobeのCS6を購入し、インストールしたのですがいくつかのソフトのアイコンが正しく表示されない現
-
[WordPress]ウィジェットの固定ページを特定のページのみ表示させるプラグイン
ワードプレスで「ウィジェットの固定ページを特定のページのみ表示させる方法」を探していま した。で、
-
[WordPress]ContactForm7をオリジナルページで表示させる方法
大変便利なプラグインContactForm7ですが、通常の設置方法は の を投稿ページや固定
-
twitterの埋め込みタイムラインウィジェットの表示がおかしい!開く、伸びる、閉じない!
現在サイトでのtwitterの埋め込みタイムラインウィジェットの表示がおかしいことに・・・!
-
[Photoshop]透過画像のふちをきれいに書き出し保存する
フォトショップ(Photoshop)で作成した透明部分がある、見出しアイコン用の透過画像を作成しまし
-
[WordPress]WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる
WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる方法 &n