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.