Remove scrollbars from textarea

web-development

responsive-design

css

accessibility

byAlex Kataev·Dec 4, 2024

Say it with me: "No more scrollbars!" Just sprinkle some CSS magic with overflow: hidden; on your textarea and watch those pesky bars disappear!

textarea { overflow: hidden; } /* Enjoy the freedom! 😀 */

But why stop there? Let's make sure that textarea remains as still as a lake on a windless day with resize: none;:

textarea { overflow: hidden; resize: none; } /* locked and loaded, ready to rock! 🚀 */

This presents a beautifully clean textarea, but keep in mind, users will depend on using arrow keys or mouse scroll to navigate.

No scrollbar? No problem!

Tame the browsers

Web development is a multi-ring circus, with different browsers as your acrobats. Let's tame them:

Internet Explorer 10+: Turn off scrollbars in style with -ms-overflow-style: none;.
Chrome, Safari, Opera: Affect scrollbar display directly with the -webkit-scrollbar pseudo-element:
```
::-webkit-scrollbar { display: none; } /* What scrollbar? 😉 */
```
Firefox: Seamlessly use overflow: hidden;, as obsoleted property overflow: -moz-scrollbars-none; is no longer necessary.

Opt for custom scrollbars

A hidden scrollbar may keep the UI clean but can affect usability and accessibility. A wider middle ground? Slimmed-down scrollbars:

textarea::-webkit-scrollbar {
  width: 10px; /* Slimmer than a supermodel's diet. 😋 */
}
textarea::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius: 10px; /* Because round is the new sexy. 😎 */
}