Disable Textarea Resizable Property using CSS

In this tutorial we will see how to Disable Textarea Resizable Property using CSS. CSS resize:none property is used for this which disables the resizing of textarea.

Table of Contents

HTML Code

Simple HTML Code is given below, In this code we have textarea html element and we will see how to disable it's resizable property using simple CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable Textarea Resizable Property using CSS</title>
</head>
<body>
    <textarea rows="15" cols="100"></textarea>
</body>
</html>

CSS Code

CSS code is given below, In this code CSS resize property is used. The CSS resize property makes an element resizable and it can also disable it's resizing property.

The resize property only applies to inline and block level elements when overflow property is set to either auto, hidden or scroll.

The resize property wont work if overflow property is set to 'visible'. Take a look at the simple line of CSS code, used to disable resizing of textarea tag.

textarea {
resize: none;
}

Demo

Check Demo

Video Tutorial

Watch video tutorial on Disable Textarea Resizable Property using CSS.