Remove scrollbars from textarea

Question

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?

score 183 · Accepted Answer · edited Jul 21 '16 at 11:41

183

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

edited Jul 21 '16 at 11:41

Shaggy

6,696
2
25
45

answered Oct 17 '13 at 11:14

tinthetub

2,120
1
14
22

6

textarea_element.style.overflow = "hidden"; (worked in Firefox 44.0) – AAAfarmclub Apr 12 '16 at 09:07
2

This approach hides scrollbar, but if your content is big it doesn't scrolls it anymore. – Vano Oct 24 '19 at 12:22
Combine with https://stackoverflow.com/questions/58169328/growing-textarea-in-blazor – Jens Mander Feb 09 '20 at 04:26
textarea { overflow:hidden; } worked for me in css – Muneeb Ejaz May 29 '22 at 19:13

score 24 · Answer 2 · edited Mar 20 '14 at 18:44

24

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

edited Mar 20 '14 at 18:44

Lucas Zamboulis

2,494
5
24
27

answered Mar 20 '14 at 18:19

Dinder Logic

303
2
2

15

how exactly is this not an answer? – Robbo Aug 07 '15 at 15:16

score 18 · Answer 3 · edited Aug 15 '20 at 14:58

18

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

edited Aug 15 '20 at 14:58

shreyasm-dev

2,711
5
16
34

answered May 16 '16 at 10:35

N V R N SATISH

219
3
7

Perfect, you can scroll but scrollbars don't show up. Exactly what I needed. Thanks. – Gorby Oz Feb 03 '22 at 00:12
2

This is not cross browser compliant, e.g. it will not in Firefox. – Raj Narayanan Mar 26 '22 at 10:17

score 10 · Answer 4 · answered Jun 23 '15 at 19:31

10

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

answered Jun 23 '15 at 19:31

tintinator

99
1
4

This. Nothing else seems to work for IE10. Great stuff. – Jimbo Jonny Jul 14 '16 at 04:07

score 10 · Answer 5 · answered Dec 03 '19 at 07:38

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/

`.scrollable {overflow: hidden;} .scrollable::-webkit-scrollbar {display: none;}` works for chrome and FF. — NickW, May 24 '22 at 17:50

score 1 · Answer 6 · answered Jan 02 '21 at 11:57

1

Hide scroll bar for Mozilla.

  overflow: -moz-hidden-unscrollable;

answered Jan 02 '21 at 11:57

MustafaEminn

248
2
6

score 0 · Answer 7 · answered Jun 18 '19 at 01:46

0

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

answered Jun 18 '19 at 01:46

SauerTrout

471
1
8
13

score 0 · Answer 8 · answered Sep 21 '22 at 15:53

The solutions for just not displaying the scrollbar (instead of completely hiding overflow) mentioned in the other answers (see ::-webkit-scrollbar) work fine except for Firefox. Also the "-moz-" specific solutions mentioned are not working in Firefox for me.

Instead use:

scrollbar-width: none;

for Firefox!

score 0 · Answer 9 · answered Feb 10 '23 at 14:05

0

like some others mentioned, hiding the scrollbars without affecting scrolling I think is the intended behavior: https://blog.logrocket.com/hide-scrollbar-without-impacting-scrolling-css

answered Feb 10 '23 at 14:05

Patrick

303
1
4
11

Remove scrollbars from textarea

9 Answers9

Linked