<textarea>-Größe erzwingen und Resizing beeinflussen

Die Textarea von HTML verfügt normalerweise über einen Anfasser in der unteren rechten Ecke der es dem Seitenbesucher ermöglicht, die Größe des Eingabefeldes selbst zu bestimmen.
Eigentlich eine gute Sache, will man doch nicht ganze Aufsätze in ein winziges Textfeld schreiben müssen. Doch häufig zerstört eine manuell vergrößerte textarea das Seitenlayout. Abhilfe kommt wie so oft per CSS.

Die <textarea> mit resize beeinflussen

Die folgenden CSS Befehle sollten selbsterklärend sein – mittels resize-Eigenschaft können die Anfasser eines Elements vom Standardwert aus verändert werden. Bei der <textarea> bedeutet dies, dass die Anfasser (zumindest teilweise) deaktiviert werden können; andere Elemente die im default über keine resize-Funktion verfügen, können mit der Eigenschaft anschließen per Maus auf die gewünschte Größe aufgezogen werden.

textarea { resize: none;}
textarea { resize: both;}
textarea { resize: vertical;}
textarea { resize: horizontal;} 

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-resize feature across the major browsers from caniuse.com

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 3 Kommentare

  1. Jannis Gerlinger
    schrieb am 01.02.2010 um 10:52 Uhr:

    Sehr gute Sache. Hab das zwar noch nicht benötigt aber werde es mir mal im Hinterkopf abspeichern. Danke Jonas

    Antworten
  2. LexX Noel
    schrieb am 29.11.2009 um 01:37 Uhr:

    Selber hast du das aber noch nicht angewendet, kommt das noch?

    Antworten
    • Jonas
      schrieb am 29.11.2009 um 17:33 Uhr:

      @LexX Noel: Ja das kommt bei mir noch alles im nächsten Redesign … dauert also noch ein wenig. Ich hab das für ein anderes Projekt gebraucht und mir gedacht es könnte mal ganz praktisch sein.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →