Categories
Uncategorized

How to disable resizing for textarea using plain CSS ?

The resize property allows a developer to define whether or not a UI element can be resized manually by the user.

Now suppose you have a textarea as shown below,
[sourcecode language=”html”]
<textarea id=”address”>Some text</textarea>
[/sourcecode]

you can disable resizing using the following css : (jsfiddle link / live demo)
[sourcecode language=”css”]
#address{
 resize: none;
}
[/sourcecode]

there are couple of more ways in which you could do the same as shown below…
[sourcecode langauge=”css”]
textarea {
 resize: none;
}
textarea[name=address] {
 resize: none;
}
textarea[id=address] {
 resize: none;
}
[/sourcecode]

https://jsfiddle.net/yrshaikh/fFQQL/embedded/result,html,css

Hope this helps 🙂

Further Reading :
How to disable resizable property of TextArea?
Disable textarea resizing for Safari and Chrome