Suchformular mit css verschönern

Solla · 13.11.2010

Hallo zusammen!

Ich habe eine Website fertiggestellt auf der im Header eine Suchfunktion mit eingebaut ist.

Nun wirkt die Standard-Suche aber wie ein Fremdkörper. Wie kann ich das mittels CSS und Co ändern? Wie könnte ich z.B. den Suchen Button durch ein Bild von einer Lupe ersetzen? Wär nett wenn mir da jemand eine Anleitung senden könnte.

Vielen lieben Dank vorab
Ich wünsche Euch allen ein schönes Wochenende

B.G. Solla

Doitsu · 13.11.2010

AW: Suchformular mit css verschönern

So was macht sich am besten wenn du im header-Bild schon die Suche drin hast. Das Inputfeld bekommt dann einfach ein background: transparent; & border: 0 none;
Anschliessend verschiebst du es nur noch an die richtige Stelle.

Alternativ kannst du aber auch einfach dem input-Feld eine ID mitgebe und das Bild dann als Hintergrund.

BaMac · 13.11.2010

AW: Suchformular mit css verschönern

Du kannst sowohl das Suchfeld als auch den Submit-Button mit CSS gestalten. Dabei ersetzt das Hintergrundbild die Standardvorgaben. Z.B.:

<title>Unbenanntes Dokument</title>
<style type="text/css">

</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="submit" name="suche" id="suche" value="" />
</label>
</form>
</body>

<form1> und <suche> sind natürlich auch frei wählbar

dj_mixer · 13.11.2010

AW: Suchformular mit css verschönern

drweb.de hat dazu mal ein Wettbewerb ausgeschrieben.

Hier findest Du die Ergebnisse inkl. der Files und einer Onlineversion.
Du kannst Formularfelder mit CSS ganz individuell gestalten, ideen und
realisierungsmöglichkeiten findest in den Musterdateien.

Link:
CSS Design-Wettbewerb: Newsletterbox Designideen | Dr. Web Magazin

ansonsten erklärt es SelfHTML auch recht ausführlich...

Solla · 13.11.2010

AW: Suchformular mit css verschönern

Vielen Dank für die schnellen Antworten. Hat prima geklappt, der Tipp das alles schon in der Hintergrundgrafik des Headers einzubauen war Gold wert ;-)

Nun habe ich allerdings noch das Problem, dass in Zustand :focus das ganze einen unschönen orangefarbenen Border hat, den ich nirgends eingegeben hatte. Hat jemand ne Idee, wie ich den weg bekomme?

B.G.
Solla

Doitsu · 13.11.2010

AW: Suchformular mit css verschönern

Hm, haettest du vllt. einen Link zur Seite? Mir ist jetzt kein Fall bekannt wo ein Browser mal einfach einen Rahmen setzt, wenn dieser nicht definiert wird.

Solla · 15.11.2010

AW: Suchformular mit css verschönern

Ne sorry, die Seite ist noch nicht hochgeladen. Werde das CSS nochmals in aller Ruhe durchsehen. Vielleicht habe ich mal weider die sprichwörtlichen Tomaten auf den Augen.

Trotzdem schon mal Danke!

B.G. Solla

dj_mixer · 15.11.2010

AW: Suchformular mit css verschönern

Bau in den Styles mal

HTML:

*:focus {outline: none;}
**::-moz-focus-inner { border: none; }

ein, damit dürfte es komplett verschwinden - und falls
gewünscht kannst Du dort die neue Farbe auch festlegen.

Solla · 16.11.2010

AW: Suchformular mit css verschönern

Hallo dj_mixer,

vielen Dank hat prima geklappt. Du bist ein Held!

B.G.
Solla