How to make textareas grow automatically with a little bit of CSS and one line of JavaScript (#note)

This post is a quick one for the bookmarks: Chris Coyier shared a smart way to automatically grow textareas when user content expands across the defined textarea size.

See the Pen Easiest Autogrowing Textarea by Chris Coyier
(…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

This post is a quick one for the bookmarks: Chris Coyier shared a smart way to automatically grow textareas when user content expands across the defined textarea size.

The solution uses stacked CSS grid elements, pseudo-elements, and one (!) line of inline JavaScript. Beautiful!


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2022-12-02T20:36:23+00:00) » How to make textareas grow automatically with a little bit of CSS and one line of JavaScript (#note). Retrieved from https://www.scien.cx/2020/11/28/how-to-make-textareas-grow-automatically-with-a-little-bit-of-css-and-one-line-of-javascript-note/.
MLA
" » How to make textareas grow automatically with a little bit of CSS and one line of JavaScript (#note)." Stefan Judis | Sciencx - Saturday November 28, 2020, https://www.scien.cx/2020/11/28/how-to-make-textareas-grow-automatically-with-a-little-bit-of-css-and-one-line-of-javascript-note/
HARVARD
Stefan Judis | Sciencx Saturday November 28, 2020 » How to make textareas grow automatically with a little bit of CSS and one line of JavaScript (#note)., viewed 2022-12-02T20:36:23+00:00,<https://www.scien.cx/2020/11/28/how-to-make-textareas-grow-automatically-with-a-little-bit-of-css-and-one-line-of-javascript-note/>
VANCOUVER
Stefan Judis | Sciencx - » How to make textareas grow automatically with a little bit of CSS and one line of JavaScript (#note). [Internet]. [Accessed 2022-12-02T20:36:23+00:00]. Available from: https://www.scien.cx/2020/11/28/how-to-make-textareas-grow-automatically-with-a-little-bit-of-css-and-one-line-of-javascript-note/
CHICAGO
" » How to make textareas grow automatically with a little bit of CSS and one line of JavaScript (#note)." Stefan Judis | Sciencx - Accessed 2022-12-02T20:36:23+00:00. https://www.scien.cx/2020/11/28/how-to-make-textareas-grow-automatically-with-a-little-bit-of-css-and-one-line-of-javascript-note/
IEEE
" » How to make textareas grow automatically with a little bit of CSS and one line of JavaScript (#note)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2020/11/28/how-to-make-textareas-grow-automatically-with-a-little-bit-of-css-and-one-line-of-javascript-note/. [Accessed: 2022-12-02T20:36:23+00:00]
rf:citation
» How to make textareas grow automatically with a little bit of CSS and one line of JavaScript (#note) | Stefan Judis | Sciencx | https://www.scien.cx/2020/11/28/how-to-make-textareas-grow-automatically-with-a-little-bit-of-css-and-one-line-of-javascript-note/ | 2022-12-02T20:36:23+00:00
https://github.com/addpipe/simple-recorderjs-demo