How to remove resize option present at the bottom-right corner of the <textarea>?

Question

I'm trying to remove dots in a <textarea> which are present at the bottom-right corner.

Here's an example of what I mean (from Chrome):

How to remove those diagonal lines?

Trickster

possible duplicate of How to disable resizable property of TextArea? – Fidelfidela

Answer 1

Just add in your CSS file

textarea { resize: none; }

Later (2019) edit: Related to this answer of mine and the rising number of GitHub code search results on resize: none declarations applied to textarea elements, I wrote some lines on why I think CSS resize none on textarea is bad for UX:

Very often, the textarea is limited to a number of rows and columns or it has fixed width and height defined via CSS. Based solely on my own experience, while answering to forums, writing contact forms on websites, filling live chat popups or even private messaging on Twitter this is very frustrating.

Sometimes you need to type a long reply that consists of many paragraphs and wrapping that text within a tiny textarea box makes it hard to understand and to follow as you type. There were many times when I had to write that text within Notepad++ for example and then just paste the whole reply in that small textarea. I admit I also opened the DevTools to override the resize: none declaration but that’s not really a productive way to do things.

from https://catalin.red/css-resize-none-is-bad-for-ux/

So you might want to check this out before adding the above to your stylesheets.

Guerrero

Just so anybody knows, resize is a CSS 3 feature, and not supported by IE Firefox or Chrome across the board. – Icelander

Yeah, this works and S.. is wrong about the lack of browser support. Psyche! He posted it in 2012 when there legitimately was no browser support. Pay more attention to the post dates, guys. – Memling

Answer 2

It is as simple as the following code. Just give the textarea the style resize: none

<textarea style="resize: none"></textarea>

Gundry

However icon is removed but resize is disabled too. Is there a way to remove it but the box be resizable? – Men

Answer 3

html

sass

textarea {
  position: relative;
  z-index: 1;
  min-width: 1141px;
  min-height: 58px;
}

.resizer {
  position: relative;
  display: inline-block;
  &:after {
    content: "";
    border-top: 8px solid #1c87c7;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    -webkit-transform: rotate(-45deg);
    z-index: 1;
    opacity: 0.5;
    position: absolute;
    bottom: 1px;
    right: -3px;
    pointer-events: none;
  }
}
.arrow-resizer-textarea {
  height: 0;
  width: 0;
  border-top: 8px solid #1c87c7;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  -webkit-transform: rotate(-45deg);
  position: absolute;
  bottom: 1px;
  right: -3px;
  pointer-events: none;
  z-index: 2;
}

Trapezius