Remove scrollbars from textarea
Following up to my previous question (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?
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
style="overflow: hidden"
and style="resize: none"
were the ones that did the trick.
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