You can easily turn on and off textarea resize properties in a CSS3 style sheet and HTML5. By default resize properties are on and you can resize your <textarea> both horizontal and vertical in the front end. In the bottom right corner you can see the grabber handle. Just drag this handle to resize the textarea in vertically and horizontally.
How to turn off resize properties
To disable or turn off resize properties just add the resize none element in the CSS style sheet of your project.
textarea {
resize: none;
}Example
<html>
<head>
<title>Disable textarea resize property</title>
<style>
body {
text-align:center;
}
textarea {
resize:none;
width:300px;
height:150px;
overflow:auto;
}
</style>
</head>
<body>
<h2>Disable textarea resize property</h2>
<textarea>Technobush- HTML5 and CSS3 is so cool and easy to learn.
</textarea>
</body>
</html>
Output
How to turn on resize properties
To enable or on resize just remove resize none element in your CSS style sheet.
Example
<html>
<head>
<title>Enable textarea resize property</title>
<style>
body {
text-align:center;
}
textarea {
width:300px;
height:150px;
overflow:auto;
}
</style>
</head>
<body>
<h2>Enable textarea resize property</h2>
<textarea>Technobush- HTML5 and CSS3 is so cool and easy to learn.
</textarea>
</body>
</html>
Output : you drag the bottom-right handle to resize.
You can also configure your textarea resize only Vertical (width) and Horizontal (height).
Horizonal example: only resize horizonal (height)
textarea {
resize: horizontal;
width:300px;
height:150px;
overflow:auto;
} Vertiacl example
textarea {
resize: vertical;
width:300px;
height:150px;
overflow:auto;
} If you have more than one textarea tag in one project, and you want only a specific area resize properties on and off. Then this method is not work. You can add the id in your <textarea> tag element.
#mytextare {
resize: none;
} For example
<html>
<head>
<title>Disable textarea resize property</title>
<style>
body {
text-align:center;
}
#mytextarea {
resize: none;
}
textarea {
width:300px;
height:150px;
overflow:auto;
}
</style>
</head>
<body>
<h2>Disable textarea resize property</h2>
<textarea>Technobush- HTML5 and CSS3 is so cool and easy to learn.
</textarea>
<textarea id= “mytextarea”>Technobush- HTML5 and CSS3 is so cool and easy to learn.
</textarea>
</body>
</html>
Read Also
