Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Formularelement <textarea> - CSS Tricks

automatisch vergrößern der Fläche, wenn das Textfeld aktiviert wurde.

Wenn ein Besucher ein Textfeld <textarea> aktiviert, soll es sich automatisch vergrößern und somit steht mehr Platz für Benutzereingaben zur Verfügung.

Beispielanimation Klick in Texfelder

Dies ist über CSS sehr einfach möglich. Im folgenden Beispiel hat das Textfeld eine Höhe von 100 Pixel. Sobald der Besucher in das Textfeld klickt, startet eine kurze Animation und das Feld vergrößert sich auf 200 Pixel. Über CSS können wir abfragen, ob der Focus sich auf diesem Feld befindet - dann hat der Besucher entweder mit der Maus auf das Feld geklickt oder ist mit der TAB-Taste zum Eingabefeld gewandert:

textarea {
  outline: none;
  height: 100px;
  width: 100%;
  transition: 0.2s;  
}

textarea:focus {
  height: 200px;
}

Einfach mit einem Textfeld testen. Soll es nur bestimmte Textfelder betreffen, dann einfach über Klassen arbeiten

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe