Disable scroll on textarea

Question

I'm trying to make the textarea unscrollable but i'm unable to find a way to get the textarea unscrollable.

I've made a simple example in jsfiddle

Thanks in advance.

Possible duplicate of [How to disable resizable property of textarea?](http://stackoverflow.com/questions/5235142/how-to-disable-resizable-property-of-textarea) — MysterX, Dec 12 '16 at 15:20

score 4 · Answer 1 · answered Dec 12 '16 at 17:44

4

Try this:

<textarea rows="10" cols="45" style="overflow:hidden;resize:none;"  placeholder="Animatie:" name="description" ></textarea>

style="overflow:hidden;resize:none;", this will fulfill your requirement hopefully.

answered Dec 12 '16 at 17:44

Farah Nawaz

score 2 · Accepted Answer · answered Dec 12 '16 at 15:20

2

Just add in the css file:

textarea {
    resize: none;
}

or:

<textarea rows="10" cols="45" placeholder="Animatie:" name="description" style="resize: none"></textarea>

answered Dec 12 '16 at 15:20

deChristo

9

That just removes the resize handle, but doesn't affect scrolling. The jsfiddle example will still scroll if you go past the bottom. – CpnCrunch Jul 26 '17 at 19:23

score 0 · Answer 3 · answered Dec 12 '16 at 17:05

0

For no resizing at all, see Luiz's answer.

For resizing in only one direction, use:

textarea { resize: vertical; }

textarea { resize: horizontal; }

answered Dec 12 '16 at 17:05

Andrew Sumner

score 0 · Answer 4 · answered Jan 27 '22 at 15:27

I know I'm late but I have a solution in case what you just want is to remove the scrollbar but keep the resize property. You do:

textarea::-webkit-scrollbar {
   dipsplay: none;
}

and the scrollbar will not show. The resize seems to still show for me until the text content requires scroll.

textarea {
width: 50%;
height: 70px;
resize: vertical;
}
textarea::-webkit-scrollbar {
 display:none;
 }

<p>Add as much text as you want</p>
<textarea></textarea>

NOTE: You can still scroll, it jsut doesn't show the scrollbar.

score -1 · Answer 5 · answered Dec 12 '16 at 15:22

-1

<style>
textarea {
resize: none;
}
</style>

answered Dec 12 '16 at 15:22

Arun

5 Answers5