How to remove the resize corner from a textarea element?

Question

I am creating a simple text editor - the text input is a textarea element. I want to remove the two lines used to change the box size (in fact, if possible, I'd like to fix the box size so it can't be changed).

This is what I'm talking about:

EDIT: Here's the code:

// HTML
<textarea id="canvas" placeholder="Write something..."></textarea>

// CSS
#canvas {
  border: 1px dashed #999;
  background: transparent;
  width: 500px;
  height: 400px;
  margin: 0 auto;
  padding: 5px;
  font-size: 20px;
}

show your code please – לבני מלכה Jul 05 '18 at 07:48 — לבני מלכה, Jul 05 '18 at 07:48
Edited from 'canvas' to 'textarea' : ) – tbd_ Jul 05 '18 at 08:15 — tbd_, Jul 05 '18 at 08:15

Bharata · Accepted Answer · 2018-07-05T08:53:05.800

8

You can try CSS properties resize and appearance:

#textbox {
    border: 1px dashed #999;
    background: transparent;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    padding: 5px;
    font-size: 20px;

    resize:none;

    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

<textarea id="textbox" placeholder="Write something..."></textarea>

edited Jul 05 '18 at 08:53

answered Jul 05 '18 at 08:36

Bharata

13,509
6
36
50

1

Excellent, thank you! – tbd_ Jul 05 '18 at 16:46

score 4 · Answer 2 · answered Jul 05 '18 at 08:25

4

Add the property resize:none to the textarea. Here is the working code:

#canvas {
    border: 1px dashed #999;
    background: transparent;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    padding: 5px;
    font-size: 20px;
    resize:none;
}

<textarea id="canvas" placeholder="Write something..."></textarea>

Hope this helps!

answered Jul 05 '18 at 08:25

Arex

674
3
10

@tkim90 do tell me if anymore changes are needed – Arex Jul 05 '18 at 08:42
This is perfect, thank you!! – tbd_ Jul 05 '18 at 16:47

How to remove the resize corner from a textarea element?

2 Answers2