Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to disable resizable property of textarea using CSS?
The CSS resize property controls whether an element can be resized by the user. By default, textareas are resizable, allowing users to drag their corners to change dimensions. Setting resize: none disables this functionality completely.
Syntax
textarea {
resize: none;
}
Possible Values
| Value | Description |
|---|---|
none |
Disables resizing completely |
both |
Allows resizing in both directions (default) |
horizontal |
Allows resizing only horizontally |
vertical |
Allows resizing only vertically |
Example: Disabling Textarea Resize
The following example creates two textareas one resizable (default) and one nonresizable
<!DOCTYPE html>
<html>
<head>
<style>
.resizable {
width: 300px;
height: 100px;
padding: 10px;
border: 2px solid #4CAF50;
border-radius: 5px;
font-family: Arial, sans-serif;
margin: 10px;
resize: both;
}
.non-resizable {
width: 300px;
height: 100px;
padding: 10px;
border: 2px solid #f44336;
border-radius: 5px;
font-family: Arial, sans-serif;
margin: 10px;
resize: none;
}
h3 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h3>Resizable Textarea (Default)</h3>
<textarea class="resizable" placeholder="Try resizing this textarea by dragging the corner"></textarea>
<h3>Non-Resizable Textarea</h3>
<textarea class="non-resizable" placeholder="This textarea cannot be resized"></textarea>
</body>
</html>
Two textareas appear on the page. The first (green border) can be resized by dragging its bottom-right corner. The second (red border) cannot be resized and maintains its fixed dimensions.
Use Cases
Disabling textarea resize is useful when
Maintaining consistent layout design
Preventing users from breaking responsive layouts
Creating fixed-size comment or feedback forms
Ensuring uniform appearance across different browsers
Conclusion
The resize: none property effectively disables textarea resizing, giving you complete control over layout consistency. Use this property when you need fixed-size text input areas that maintain their dimensions regardless of user interaction.
1K+ Views
