Remove scrollbars from textarea

HtmlScrollTextareaScrollbarOverflow

Html Problem Overview


Following up to my previous question (https://stackoverflow.com/questions/19420923/add-a-scrollbar-to-a-textarea) on how to always see the scrollbar in a <textarea>, I am now wondering how you would set it so that there is no scrollbar in the <textarea>, even when the text overflows. To scroll down with this, you would use the arrow keys or the mouse to navigate through the text.

How can I do this?

Html Solutions


Solution 1 - Html

Try the following, not sure which will work for all browsers or the browser you are working with, but it would be best to try all:

<textarea style="overflow:auto"></textarea>

Or

<textarea style="overflow:hidden"></textarea>

...As suggested above

You can also try adding this, I never used it before, just saw it posted on a site today:

<textarea style="resize:none"></textarea>

This last option would remove the ability to resize the textarea. You can find more information on the CSS resize property here

Solution 2 - Html

style="overflow: hidden" and style="resize: none" were the ones that did the trick.

Solution 3 - Html

Give a class for eg: scroll to the textarea tag. And in the css add this property -

.scroll::-webkit-scrollbar {
   display: none;
 }

<textarea class='scroll'></textarea>

It worked for without missing the scroll part

Solution 4 - Html

For MS IE 10 you'll probably find you need to do the following:

-ms-overflow-style: none

See the following:

https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx

Solution 5 - Html

Hide scroll bar, but while still being able to scroll using CSS

To hide the scrollbar use -webkit- because it is supported by major browsers (Google Chrome, Safari or newer versions of Opera). There are many other options for the other browsers which are listed below:

    -webkit- (Chrome, Safari, newer versions of Opera):
    .element::-webkit-scrollbar { width: 0 !important }
    -moz- (Firefox):
    .element { overflow: -moz-scrollbars-none; }
    -ms- (Internet Explorer +10):
    .element { -ms-overflow-style: none; }

ref: https://www.geeksforgeeks.org/hide-scroll-bar-but-while-still-being-able-to-scroll-using-css/

Solution 6 - Html

Hide scroll bar for Mozilla.

  overflow: -moz-hidden-unscrollable;

Solution 7 - Html

I was able to get rid of my scroll bar on the body of text by removing my max-height attribute of my class.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser2370460View Question on Stackoverflow
Solution 1 - HtmltinthetubView Answer on Stackoverflow
Solution 2 - HtmlDinder LogicView Answer on Stackoverflow
Solution 3 - HtmlN V R N SATISHView Answer on Stackoverflow
Solution 4 - HtmltintinatorView Answer on Stackoverflow
Solution 5 - HtmlFarzadJamshidiView Answer on Stackoverflow
Solution 6 - HtmlMustafaEminnView Answer on Stackoverflow
Solution 7 - HtmlSauerTroutView Answer on Stackoverflow