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 <input type="image" src="image_url" />:<form method="get" id="searchform" action=" http:/ / www.sohtanaka.com/ ">
<fieldset>
<input type="text" value="" name="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="Search" class="btn" />
</fieldset>
</form>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 <button>-Tag zu verwenden und dann den Hintergrund mithilfe von CSS hinzuzufügen. Dadurch können Texteingabefelder und Schaltflächen automatisch ausgerichtet werden. Ich habe dem endgültigen Effekt auch eine :focus-Pseudoklasse hinzugefügt (IE unterstützt dies nicht, daher habe ich einen speziellen Stil für IE hinzugefügt, um diesen Effekt zu verbergen). Hier sind einige Vorteile dieses Ansatzes:
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
<form method="get" id="searchform" action=" http://www.sohtanaka.com/ ">
<fieldset class="search">
<input type="text" class="box" />
<button class="btn" title="Suche senden">Suchen</button>
</fieldset>
</form>CSS
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
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->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. ***/
}