CODEWITHSUNDEEP
htmlcsstextarea
Jayaram
Jayaram

Reputation: 1011

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

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):
example

How to remove those diagonal lines?

Upvotes: 101

Views: 73534

Answers (4)

Rushberry
Rushberry

Reputation: 1

textarea::-webkit-resizer{
  display: none;
}

Upvotes: 0

Asma Alfauri
Asma Alfauri

Reputation: 109

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

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

Upvotes: 5

Red
Red

Reputation: 3139

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.

Upvotes: 170

thirteen
thirteen

Reputation: 19

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;
}

Upvotes: -1

Related Questions