EN
CSS - disable textarea resize button
6
points
In this article, we would like to show you how to disable textarea resize button using CSS.
Quick solution:
textarea {
resize: none;
}
Practical example
This approach removes both direction resizing (vertical and horizontal).
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
textarea {
resize: none;
}
</style>
</head>
<body>
<textarea rows="10" cols="40">This is example text...</textarea>
</body>
</html>
Alternative solutions
1. resize: horizontal
This approach removes vertical resizing.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
textarea {
resize: horizontal;
}
</style>
</head>
<body>
<textarea rows="10" cols="40">This is example text...</textarea>
</body>
</html>
2. resize: vertical
This approach removes horizontal resizing.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
textarea {
resize: vertical;
}
</style>
</head>
<body>
<textarea rows="10" cols="40">This is example text...</textarea>
</body>
</html>