How do I remove a corner from textarea without using resize: none?

Question

How do I remove a corner from textarea without using resize: none?

You need to remove the corner from the textarea so that the resize property remains (it is necessary for executing the script).

1

html javascript css textarea resize

Author: Kniha m, 2017-11-20

Source

1 answers

score 1 · Answer 1

The simplest option is to wrap textarea.

div {  
  display: inline-block;
  position: relative;
}

div:after {
  content: '';
  display: block;
  z-index: 10;
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 20px solid white;
  border-left: 20px solid transparent;
  right: 1px;
  bottom: 3px;
}

<div>
  <textarea rows="5" cols="30"></textarea>
</div>

The user will not be able to change the size, but the script can. There is a small flaw in this case: in the corner where the corner is hidden, the cursor does not change.