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.

Thiosinamine

Possible duplicate of How to disable resizable property of textarea? – Masto

Answer 1

Just add in the css file:

textarea {
    resize: none;
}

or:

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

Fiddle: https://jsfiddle.net/p6am6dze/2/

Ship

That just removes the resize handle, but doesn't affect scrolling. The jsfiddle example will still scroll if you go past the bottom. – Oliy

Answer 2

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.

Orji

Answer 3

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

For resizing in only one direction, use:

textarea { resize: vertical; }

textarea { resize: horizontal; }

West

Answer 4

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.

Tertius

Answer 5

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

Trilogy