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. However, this feature may not always be desirable, especially in cases where the size of the input field should remain fixed. In such cases, the resize grabber can be disabled using CSS.
Approaches: There are a few approaches to disable the resize grabber of <textarea>.
Approach 1: 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">neveropen</textarea> By default, this <textarea> element includes a resize grabber.
Example: Here we are using the above-explained approach.
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> |
This will disable the resize grabber, and the <textarea> element will look like this:
No Resizing Icon.
Approach 2: 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: Using JavaScript Suppose we have the following HTML code:
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> |
This will disable the resize grabber for the <textarea> element with the id attribute set to myTextarea.
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.
