{"id":3054,"date":"2017-04-24T15:48:29","date_gmt":"2017-04-24T20:48:29","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2224"},"modified":"2017-04-24T15:48:29","modified_gmt":"2017-04-24T20:48:29","slug":"8-awesome-css-textarea-snippets","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/8-awesome-css-textarea-snippets\/","title":{"rendered":"8 Awesome CSS Textarea Snippets"},"content":{"rendered":"

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.<\/p>\n

1. \u00a0Highlighted Text in a Textarea<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

2. Auto-expanding Textarea<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

3. Hidden Navigation With Textarea<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

4. Notebook Textarea<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

5. Twemoji<\/a><\/p>\n

\"Screen<\/a><\/p>\n

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.<\/p>\n

6. What You See is What You Get Editor<\/a><\/p>\n

\"Screen<\/a><\/p>\n

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.<\/p>\n

7. Under the Sea Contact Form<\/a><\/p>\n

\"Screen<\/a><\/p>\n

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.<\/p>\n

8. Character Counter Textarea<\/a><\/p>\n

\"Screen<\/a><\/p>\n

If you’d like to add a limit to the amount of characters\u00a0that your users can enter into your textareas and\/or\u00a0if 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.<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2236,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3054"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3054"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3054\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2236"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}