Disable HTML TextArea Resize in Chrome, FireFox and Safari using CSS

In this article, I’ll describe how to make browsers like Google Chrome, Mozilla Firefox, and Apple Safari incapable of allowing users to resize the HTML TextArea control.
The answer to this issue is contained in CSS3, and fortunately, all three browsers support CSS3, allowing us to use the TextArea’s resize CSS feature.

You can set it directly in the style attribute if you choose.

<textarea id="txt2" cols="20" rows="5" style = "resize:none"></textarea>

Or make use of the CSS style sheet.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        textarea
        {
            resize: none;
        }
    </style>
</head>
<body>
    <textarea id="txt" cols="20" rows="5"></textarea>
</body>
</html>

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories