Galerie

Profitipps zu Webseitengestaltung mit CSS - Mehrzeilige Textfelder: Bei diesen Formularelementen stimmt die verwendete Schriftart nicht.

Mehrzeilige Textfelder: Bei diesen Formularelementen stimmt die verwendete Schriftart nicht.

Tipp 1: Eingebene Textfeld-Zeichen formatieren

Formulare fragen recht unterschiedliche Informationen ab. Man findet Sie in nahezu jeder Website. Doch immer wieder fällt auf, dass die von Benutzern eingegebenen Zeichen nicht dem allgemeinen Erscheinungsbild entsprechen.


Der sichtbare Text sollte mit dem sonst üblichen Design der Website übereinstimmen. Dabei sind allgemeine Schriftattribute häufig für das body-Element definiert: So bestimmen Sie mit diesem Tag-Selektor die Schriftattribute für die Seite: body {font: 1em Arial, Helvetica, sans-serif;}. In den meisten Webbrowsern werden jedoch die in einzeiligen Textfeldern eingegebenen Zeichen etwas kleiner als festgelegt angezeigt.

Bei mehrzeiligen Textfeldern sind die Zeichen zwar gleich groß, werden jedoch nicht in der gewünschten Schriftart, sondern in Courier dargestellt.

Mit dem folgenden Listing beheben Sie diese unschönen Darstellungsproblematiken und realisieren einheitliche Schriftattribute. Dabei verwenden Sie die gleiche CSS-Deklaration wie zuvor beim body-Element. Als Element-Selektor geben Sie die HTML-Tags input für einzeilige Textfelder und textarea für mehrzeilige Formularelemente an: input, textarea {font: 1em Arial, Helvetica, sans-serif;} Damit erhalten kritische Formularelemente also eine separate CSS-Regel. Selbstverständlich können Sie diese mit der CSS-Regel für das body-Element kombinieren.

Die beliebtesten Bildergalerien
Galerie
Videos freischalten
Solange YouTube und die GEMA sich streiten, schauen deutsche Musikfreunde in die Röhre. Mit den Tipps in der Galerie lässt sich die YouTube-Sperre…
Galerie
Top 10
WLAN-Router dienen als Zentrale für Internet und WLAN. Wir zeigen Ihnen die zehn Geräte, die im Test am besten abgeschnitten haben.
Galerie
God Mode, Virtual Desktops , Startmenü & Co.
Wir verraten 20 Tipps und Tricks für Windows 10: Damit haben Sie das neue Microsoft-Betriebssystem zum Release direkt im Griff.
Weitere Bildergalerien entdecken
Einen chronologischen Überblick über alle bisherigen Bildergalerien finden Sie in unserem Archiv-Bereich. Entdecken Sie unsere faszinierende Bilder!