Heute werde ich vorstellen, wie Sie Hintergrundbilder in CSS verwenden, um Ihr Suchfeld zu gestalten. Ich habe schon früher andere Methoden zur Implementierung meines Formulars und Suchfelds verwendet, aber diese Methode schien einfacher zu sein, also dachte ich, ich würde sie mit allen Interessierten teilen.
Demo-Originalmethode
ansehen
Werfen wir zunächst einen Blick auf meine ursprüngliche Methode zur Verwendung von : Das sieht gut aus, aber es gibt einen Nachteil. Die Bildschaltfläche stimmt nicht mit dem Suchfeld überein. Um diesen Fehler zu beheben, musste ich ein negatives Attribut „margin-top“ verwenden.der ursprünglichen Methode
In dieser verbesserten Version der Methode habe ich mich entschieden, nicht type="image" zu verwenden, sondern das
Natürliche Ausrichtung mit nur einem Bild für Schaltflächen und Eingabefelder
Die Pseudoklasse :focus unterstützt Browser, die Hover-Effekte zu Schaltflächen hinzufügen.
HTML
fieldset.search {
Grenze: keine;
Breite: 243px;
Rand: 0 automatisch;
Hintergrund: #222;
}
.search-Eingabe, .search-Schaltfläche {
Grenze: keine;
schweben: links;
}
.search input.box {
Farbe: #fff;
Schriftgröße: 1,2em;
Breite: 190px;
Höhe: 30px;
Polsterung: 8px 5px 0;
Hintergrund: #616161 url(search_bg.gif) no-repeat;
Rand rechts: 5px;
}
.search input.box:focus {
Hintergrund: #616161 url(search_bg.gif) no-repeat left -38px;
Gliederung: keine;
}
.search button.btn {
Breite: 38px;
Höhe: 38px;
Cursor: Zeiger;
Texteinzug: -9999px;
Hintergrund: #fbc900 url(search_bg.gif) no-repeat oben rechts;
}
.search button.btn:hover {
Hintergrund: #fbc900 url(search_bg.gif) no-repeat unten rechts;
}IE-Spezialkommentare
IE style-ie.css
Ein Freund bemerkte, dass IE6 und IE7 das Hintergrundbild horizontal scrollen würden, wenn Sie zu viel Text eingeben. Deshalb bestand mein Ansatz darin, ein separates Hintergrundbild speziell für IE zu verwenden, und statt es nach links auszurichten, habe ich es umgedreht und den Hintergrund ausgerichtet Bild rechts, um das Problem zu beheben.
.search input.box {
Hintergrund: url(search_bg_ie.gif) no-repeat rechts unten;
/* Ein unabhängiges Hintergrundbild speziell für IE, und dieses Bild muss rechtsbündig sein. ***/
}