How to Make Textarea Not Resizable
By default, most web browsers allow users to resize textareas by dragging the bottom-right corner. However, there might be situations where you want to prevent users from resizing the textarea. So, how do you stop this.
The CSS resize Property
The resize property in CSS controls whether an element, such as a textarea, can be resized by the user. By default, the resize property is set to both, allowing both horizontal and vertical resizing. To make a textarea not resizable, you can set the resize property to none.
textarea {
resize: none;
}
By adding this CSS rule to your stylesheet, you effectively disable the resizing feature for all textareas on your webpage.
Example
Let’s walk through a quick example to demonstrate how to make a textarea not resizable. Suppose you have the following HTML markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Non-Resizable Textarea</title>
</head>
<body>
<textarea id="myTextarea" rows="4" cols="50"></textarea>
</body>
</html>
To prevent the textarea from being resized, create a styles.css file and add the following CSS rule:
/* styles.css */
textarea {
resize: none;
}
When you load the HTML file in your browser, you’ll notice that the textarea is not resizable anymore.
Customizing the Appearance
If you want to make it clear to users that the textarea is not resizable, you can apply additional styling. For instance, you can change the cursor type to indicate that resizing is not allowed:
textarea {
resize: none;
cursor: not-allowed;
}
This will change the cursor to a “not allowed” symbol when hovering over the textarea, reinforcing the idea that resizing is disabled.
