[html] 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?

This question is related to html scroll textarea scrollbar overflow

The answer is


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


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


Hide scroll bar for Mozilla.

  overflow: -moz-hidden-unscrollable;

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/


Give a class for eg: scroll to the textarea tag. And in the css add this property -

_x000D_
_x000D_
.scroll::-webkit-scrollbar {
   display: none;
 }
_x000D_
<textarea class='scroll'></textarea>
_x000D_
_x000D_
_x000D_

It worked for without missing the scroll part


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


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to scroll

How to window.scrollTo() with a smooth effect Angular 2 Scroll to bottom (Chat style) Scroll to the top of the page after render in react.js Get div's offsetTop positions in React RecyclerView - How to smooth scroll to top of item on a certain position? Detecting scroll direction How to disable RecyclerView scrolling? How can I scroll a div to be visible in ReactJS? Make a nav bar stick Disable Scrolling on Body

Examples related to textarea

Get user input from textarea Set textarea width to 100% in bootstrap modal Remove scrollbars from textarea Add a scrollbar to a <textarea> Remove all stylings (border, glow) from textarea How to clear text area with a button in html using javascript? Get value from text area What character represents a new line in a text area Count textarea characters More than 1 row in <Input type="textarea" />

Examples related to scrollbar

How to get on scroll events? Transparent scrollbar with css Remove scrollbars from textarea Body set to overflow-y:hidden but page is still scrollable in Chrome How to change scroll bar position with CSS? Prevent scroll-bar from adding-up to the Width of page on Chrome How can I add a vertical scrollbar to my div automatically? Detect Scroll Up & Scroll down in ListView Tkinter scrollbar for frame How do I make the scrollbar on a div only visible when necessary?

Examples related to overflow

Bootstrap button drop-down inside responsive table not visible because of scroll Remove scrollbars from textarea Carry Flag, Auxiliary Flag and Overflow Flag in Assembly Horizontal scroll css? Body set to overflow-y:hidden but page is still scrollable in Chrome How can I add a vertical scrollbar to my div automatically? CSS text-overflow: ellipsis; not working? Have a fixed position div that needs to scroll if content overflows Mobile overflow:scroll and overflow-scrolling: touch // prevent viewport "bounce" Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers