Textarea fields are great because they’re useful and they’re super easy to work with. Sometimes, however, a scrollbar appears within the textarea field, usually because the amount of text in the textarea exceeds the height of the textarea field because the field is just too small — there’s not much that can be done (or should be done) about a scrollbar in this context. However, on Internet Explorer, it seems like scrollbars are always appearing even if there’s no text in the textarea, which can really mess with the look, feel, and flow of your design.
If you’re not a fan of the scrollbar look, there is a way to easily remove the scroll from any of your text area elements with CSS using the overflow property. It only takes one line of code. Take a look at the snippet below to see how it’s done:
textarea{
overflow: auto;
}
It’s seriously that easy. The default value for the overflow property is visible, meaning that if there’s overflowing content from an element, it just overflows to outside of the box. By setting the property to auto, it should add a scrollbar to the element only if there’s a chance of text overflowing. So if the textarea box is free of text, this should make those pesky scrollbars disappear.