Can't reduce size of textarea in Chrome and Opera

Question

I can't reduce size of textarea using mouse although I didn't specify minimum width and height. In Firefox everything is ok. This question was asked here: Can't reduce size of resizable textarea in Chrome, but I couldn't find suitable answer, maybe someone can help me.

This is my mark up:

<textarea id="textarea" name="textarea"></textarea>

and CSS:

textarea{
    width: 90%;
    height: 400px;
    border: 2px dashed black;
    border-radius: 12px;
    background-color: transparent;
    font-family: Purisa;
    font-size: 23px;
    padding: 5px;
    margin: 20px auto auto auto;
    outline: none;
    border-color: black;
}

Araliaceous

When your question has already been asked, you should not post a duplicate but try to have the answers to an existing question improved. We do no want to have copies of the same question, with different sets of answers. – Kenelm

possible duplicate of Can't reduce size of resizable textarea in Chrome – Kenelm

Answer 1

Google Chrome has a some kind of restriction to show content properly to user. Because of that they edited the default actions of resizing on <textarea>. In older versions of chrome there was no restriction.

So if you use height min-height will be your height. So you need to set min-height and max-height only. Height overrides min-height in Chrome.

Here is a simple fiddle: http://jsfiddle.net/gAr72/1/

Edit:

You can see Firefox will work same as Chrome in this fiddle. Height is risky for design btw. Unlimited resizing always breaks the design. So limiting height and width is good option.

Rubinrubina