Textfeld mit Hintergrundgrafik

25. September 2009  |  Kommentar schreiben   |  Tags:



Bei Facebook teilen

Sehr oft geht man hin und ändert die Einstellungen an der grafischen Gestaltung eines Textfeldes, also ein:

<input type="text" />

Also, wie kann man die Programmierung so abändern, dass das Textfeld nicht nur diverse Hintergrundfarben, Schriften oder ähnliches aufweisen kann, sondern ganz anders aussehen kann, wie z.B. angerundet, Vista style oder mit einer eingebetteten Lupe? Hier ist ein funktionierendes Beispiel:

Die ganz normalen Eigenschaften wie Breite, Höhe kommen hier auch ins Spiel. Sie sind aber trivial für die meisten HTML Elemente. Wie haben wir aber das Vista Style erreicht? Anbei die HTML Programmierung des Inputfeldes:

<input class="textBoxSearch" type="text" />

Hier sehen wir, dass dem Feld eine CSS-Klasse zugeordnet ist. Und hier ist es wie die Klasse programmiert ist:

.textBoxSearch {
color: #fff;
border: 1px solid #a2a2a2;
background-image: url('images/back_input_search_kach.jpg');
background-repeat: repeat-x;
}

An dieser Stelle setzt man eine Grafik als Hintergrundgrafik und lässt diese kacheln. Das heißt, dass egal wie lang Ihr Feld wird, wird die komplette Breite durch den Hintergrund befüllt. Durch das CSS-Attribut “color” kann man dem Hintergrund entsprechend die Schriftfarbe ändern, so dass der Text zu lesen ist.

Diese Funktion ist unter alle Browser verfügbar – jetzt können Sie Ihrer Seite ein richtiges Vista Styling geben.

Teilen

Hinterlasse eine Antwort

Du musst angemeldet sein, um einen Kommentar abzugeben.