How to disable the resize grabber of <textarea> in HTML ?
Last Updated :
05 Jan, 2024
You can use the resize property to specify whether a text area should be resizable or not. The <textarea> is an HTML tag used to create a multi-line input field. By default, <textarea> includes a resize grabber in the bottom right corner which allows users to resize the input field by dragging the grabber with the mouse.
Syntax:
textarea {
resize: none;
}
Using CSS
As mentioned earlier, the simplest way to disable the resize grabber is by using CSS. The resize property allows us to control the resizable behavior of <textarea>. By setting this property to none, we can disable the resize grabber. This approach is recommended as it is easy to implement and does not require any additional JavaScript code.
Syntax:
<textarea rows="4" cols="50">geeksforgeeks</textarea>
By default, this <textarea> element includes a resize grabber.
Example:Â In this example, we will see how to disable the resize grabber of textarea in an HTML document by using CSS .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<textarea rows="4" cols="50">
GeeksForGeeks
</textarea>
</body>
</html>
|
Output:
Resizing Icon is present.
To disable the resize grabber, we can add the following CSS code to the <style> section of our HTML document:
HTML
<!DOCTYPE html>
<html>
<style>
textarea {
resize: none;
}
</style>
<head>
<title></title>
</head>
<body>
<textarea rows="4" cols="50">
GeeksForGeeks
</textarea>
</body>
</html>
|
Output:
No Resizing Icon.
Using JavaScript
Another way to disable the resize grabber is by using JavaScript. This approach involves removing the resize grabber element from the <textarea> element using JavaScript code. However, this approach is more complex than the CSS approach and requires additional JavaScript code.
Example:Â In this example, we will see how to disable the resize grabber of textarea in an HTML document by using Javascript .
HTML
<!DOCTYPE html>
<html>
<body>
<textarea id="myTextarea"
rows="4" cols="50">
GeeksForGeeks
</textarea>
<script>
var textarea =
document.getElementById("myTextarea");
textarea.style.resize = "none";
</script>
</body>
</html>
|
Output:
No Resizing Icon.
Conclusion: In conclusion, the resize grabber of <textarea> can be disabled using CSS or JavaScript. The CSS approach is simpler and recommended, while the JavaScript approach is more complex and requires additional code. Disabling the resize grabber can be useful in cases where the size of the input field should remain fixed, and the user should not be able to resize it.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...