1+ Textarea Components - Vanilla CSS

Vanilla CSS textarea components are simple and lightweight elements that you can add to your website to allow users to input large amounts of text. These textareas are styled using only CSS, without the need for JavaScript or external libraries. In this collection, you'll find various designs for textareas that you can easily incorporate into your website's design. Whether you prefer a basic textarea or a more visually appealing style, these Vanilla CSS textarea components are designed to improve user input and provide a seamless browsing experience for your website visitors.

Auto Expand Textarea

Auto expand textarea implementation using HTML, CSS, and JavaScript, perfect for enhancing user experience with text input fields that automatically adjust their size based on content.

Author: Admin

Preview
Code

<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea' autofocus></textarea>

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: #87b48e;
  display: flex;
  align-items: center;
}

textarea {
  display: block;
  box-sizing: padding-box;
  overflow: hidden;
  padding: 10px;
  width: 250px;
  font-size: 14px;
  margin: 50px auto;
  border-radius: 6px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  border: 0;
}
textarea:focus {
  border: none;
  outline: none;
}

function getScrollHeight(elm){
  var savedValue = elm.value
  elm.value = ''
  elm._baseScrollHeight = elm.scrollHeight
  elm.value = savedValue
}

function onExpandableTextareaInput({ target:elm }){
  if( !elm.classList.contains('autoExpand') || !elm.nodeName == 'TEXTAREA' ) return
  
  var minRows = elm.getAttribute('data-min-rows')|0, rows;
  !elm._baseScrollHeight && getScrollHeight(elm)

  elm.rows = minRows
  rows = Math.ceil((elm.scrollHeight - elm._baseScrollHeight) / 16)
  elm.rows = minRows + rows
}

document.addEventListener('input', onExpandableTextareaInput)