CODEWITHSUNDEEP
javascripthtmlcsstextarea
Dennis Offinga
Dennis Offinga

Reputation: 95

Disable scroll on textarea

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.

Upvotes: 5

Views: 23741

Answers (5)

lewism205
lewism205

Reputation: 33

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.

Upvotes: 0

Farah Nawaz
Farah Nawaz

Reputation: 430

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.

Upvotes: 6

Andrew Sumner
Andrew Sumner

Reputation: 47

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

For resizing in only one direction, use:

textarea { resize: vertical; }

textarea { resize: horizontal; }

Upvotes: 0

Arun
Arun

Reputation: 1719

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

Upvotes: -1

deChristo
deChristo

Reputation: 1878

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/

Upvotes: 2

Related Questions