今回はCSSで背景画像を使って検索ボックスをデザインする方法を紹介します。以前に他の方法でフォームと検索ボックスを実装したことがありましたが、この方法の方が簡単に思えたので、興味のある方と共有したいと思いました。
デモを見る
オリジナルのメソッド まず、<input type="image" src="image_url" /> を使用する私のオリジナルのメソッドを見てみましょう:
<form method="get" id="searchform" action=" http:// www.sohtanaka.com/ ">
<フィールドセット>
<input type="text" value="" name="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="検索" class="btn" />
</フィールドセット>
</form>これは良いように見えますが、画像ボタンが検索ボックスと整列しないという欠点があります。このバグを修正するには、負の margin-top 属性を使用する必要がありました。
元のメソッド
この改良版のメソッドでは、type="image" を使用せず、<button> タグを使用し、CSS を使用して背景を追加することにしました。これにより、テキスト入力ボックスとボタンが自動的に配置されます。また、最終効果に :focus 疑似クラスを追加しました (IE はこれをサポートしないため、この効果を非表示にする特別なスタイルを IE に追加しました)。 このアプローチの利点は次のとおりです。
ボタンと入力フィールドに 1 つの画像のみを使用した自然な配置
:focus 疑似クラスは、ボタンにホバー効果を追加するブラウザをサポートします。
HTML
<form method="get" id="searchform" action=" http://www.sohtanaka.com/ ">
<フィールドセットクラス="検索">
<input type="text" class="box" />
<button class="btn" title="検索を送信">検索</button>
</フィールドセット>
</form>CSS
フィールドセット.検索 {
境界線: なし。
幅: 243ピクセル;
マージン: 0 自動;
背景: #222;
}
.search 入力、.search ボタン {
境界線: なし。
フロート: 左;
}
.検索入力ボックス {
色: #fff;
フォントサイズ: 1.2em;
幅: 190ピクセル;
高さ: 30ピクセル;
パディング: 8px 5px 0;
背景: #616161 url(search_bg.gif) 繰り返しなし;
マージン右: 5px;
}
.search input.box:focus {
背景: #616161 url(search_bg.gif) リピートなし左 -38px;
概要: なし。
}
.検索ボタン.btn {
幅: 38px;
高さ: 38px;
カーソル: ポインタ;
テキストインデント: -9999px;
背景: #fbc900 url(search_bg.gif) 右上; 繰り返しなし。
}
.検索ボタン.btn:hover {
背景: #fbc900 url(search_bg.gif) 繰り返しなし、右下。
}IE の特別なコメント
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->IE スタイル-ie.css
友人が、IE6 と IE7 ではテキストを入力しすぎると背景画像が横にスクロールしてしまうとコメントしたので、私のアプローチは、IE 専用の別の背景画像を使用し、それを左に揃えるのではなく、反転して背景を揃えることでした。これを修正するには右の画像。
.検索入力ボックス {
背景: url(search_bg_ie.gif) 繰り返しなし右下;
/* IE 専用の独立した背景画像。この画像は右揃えにする必要があります。 ***/
}