How to Disable Resizing HTML Textarea

How to disable textarea resizing

You may use the resize: none property to disable resizing of a textarea in a web browser.

Generally, the textarea can be stretched to expand that may affect different sections of a webpage.

By using the CSS, you may disable this overall or by specifying a particular direction as shown in the examples below.

A fixed size textarea example

By simply using resize: none property, you may disable resizing of a textarea. See this demo where this is assigned to the textarea in <style> section:

textarea resize

You can see, textarea size cannot be increased or decreased horizontally or vertically. The size is specified by height and width properties by using CSS and it is fixed.

<!DOCTYPE html>

<html>

<head>

<style>
 
textarea {

    resize: none;

    height:300px;

    width:300px;

}

</style>
</head>

<body>

<h3>A demo of disabling textarea resize</h3>

<textarea readonly >

<!DOCTYPE html>

<html>

<head>


<style>
 
textarea {

    resize: none;

}

</style>

</head>

<body>

<h3>A demo of disabling textarea resize</h3>


</body>

</html>

 </textarea>

</body>

</html>

Allowing resizing of textarea vertically only

By using the resize: vertical; property, you may restrict the resizing of the textarea vertically. Copy/Paste the code below and execute – try resizing the textarea vertically and horizontally:

textarea resize vertical

The code:

<!DOCTYPE html>

<html>

<head>

<style>

 .txtarea {

    resize: vertical;

    height:200px;

    width:200px;

}


</style>

</head>

<body>

<h3>A demo of resize vertically</h3>

 

<textarea class="txtarea" readonly >

<!DOCTYPE html>

<html>

<head>

 

<style>

 

textarea {

    resize: none;

}

 

</style>

</head>

<body>

<h3>A demo of disabling textarea resize</h3>

 

</body>

</html>

 

</textarea>

</body>

</html>

A demo of horizontal resizing

In this demo, only horizontal resizing is enabled.

textarea resize horizontal

The code:

<!DOCTYPE html>

<html>

<head>

 

<style>

 

.txtarea {

    resize: horizontal;

    height:250px;

    width:250px;

}

 

</style>

</head>

<body>

<h3>A demo of resize horizontally</h3>

 

<textarea class="txtarea" readonly >

<!DOCTYPE html>

<html>

<head>

 

<style>

 

textarea {

    resize: none;

}

 

</style>

</head>

<body>

<h3>Horizontally resize</h3>

 

</body>

</html>

 

</textarea>

</body>

</html>

In above two examples, you can see the CSS classes are used rather generally specifying the textarea in style section.

This is because the specific properties will apply to only the particular textarea that you assign this class. If textarea was used like in the first example, the restriction would have applied to all textarea in the web page.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! ️