8 Awesome CSS Textarea Snippets

Published April 24, 2017 by CSS Newbies.

Textareas are HTML elements that are meant for inputting large amounts of text. They differ from input fields because they are a lot larger than a typical input field, and can be manually resized by the user to accommodate a great deal of text. Most developers and designers don’t pay a whole lot of attention to textareas when it comes to style, and that’s totally fine, but if you’re looking to add a little flair to your plain textareas, check out this curated collection of stylish textarea snippets from around the web. You’re sure to find something you like enough to include in your next project.

1.  Highlighted Text in a Textarea

Screen Shot 2017-04-19 at 4.43.42 PM

 

This snippet uses a cool CSS hack to generate a highlighting effect within a textarea. As you can see from the screenshot, it’s not technically possible to render markup within a textarea element, but this snippet shows you how you can fake a similar effect by positioning a div behind the textarea and adding your desired highlights within that div.

2. Auto-expanding Textarea

Screen Shot 2017-04-19 at 4.47.02 PM

 

This one is really cool. This snippet uses Angular to create a textarea that expands dynamically based on how much content is within it. The user is still given the option to manually expand the textarea, but that shouldn’t be necessary when it expands on its own.

3. Hidden Navigation With Textarea

Screen Shot 2017-04-19 at 4.48.51 PM

 

This innovate snippet uses the textarea element’s built-in expand feature to create a hidden menu that can be pulled in and out of view. The effect is really versatile and can be used for a lot of purposes.

4. Notebook Textarea

Screen Shot 2017-04-19 at 4.51.31 PM

 

This fun CSS snippet styles your textarea to look like a piece of paper from a composition notebook. The effect is complemented by the use of the old-fashioned typewriter-style font.

5. Twemoji

Screen Shot 2017-04-19 at 4.54.04 PM

This snippet is for a plugin that allows you to easily add dozens upon dozens of cool emojis (along with text) to any textarea box just like you would when typing a text message on your phone.

6. What You See is What You Get Editor

Screen Shot 2017-04-19 at 4.55.43 PM

Another cool textarea snippet, this one creates a rich text editor, also known as a What You See is What You Get (WYSIWYG) editor out of a simple textarea element, so that the text within the element can be easily formatted by the user even if they have no coding knowledge.

7. Under the Sea Contact Form

Screen Shot 2017-04-19 at 4.58.40 PM

Most contact forms usually contain some sort of textarea element where the main message is meant to be written. This snippet gets creative when styling the input fields and textarea by paying homage to the sea and some of its lovely creatures.

8. Character Counter Textarea

Screen Shot 2017-04-19 at 5.01.04 PM

If you’d like to add a limit to the amount of characters that your users can enter into your textareas and/or if you’d like to display a character counter with your textareas, this snippet can help you to achieve both. Both features are created using this snippet, so simply customize the code to fit the exact needs of your projects and websites.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>