今回はCSSで背景画像を使って検索ボックスをデザインする方法を紹介します。以前に他の方法でフォームと検索ボックスを実装したことがありましたが、この方法の方が簡単に思えたので、興味のある方と共有したいと思いました。
デモを見る
オリジナルのメソッド まず、 を使用する私のオリジナルのメソッドを見てみましょう:
これは良いように見えますが、画像ボタンが検索ボックスと整列しないという欠点があります。このバグを修正するには、負の margin-top 属性を使用する必要がありました。
元のメソッド
この改良版のメソッドでは、type="image" を使用せず、
ボタンと入力フィールドに 1 つの画像のみを使用した自然な配置
:focus 疑似クラスは、ボタンにホバー効果を追加するブラウザをサポートします。
HTML
フィールドセット.検索 {
境界線: なし。
幅: 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 の特別なコメント
IE スタイル-ie.css
友人が、IE6 と IE7 ではテキストを入力しすぎると背景画像が横にスクロールしてしまうとコメントしたので、私のアプローチは、IE 専用の別の背景画像を使用し、それを左に揃えるのではなく、反転して背景を揃えることでした。これを修正するには右の画像。
.検索入力ボックス {
背景: url(search_bg_ie.gif) 繰り返しなし右下;
/* IE 専用の独立した背景画像。この画像は右揃えにする必要があります。 ***/
}