Quick tip - CSS3 resize attribute

By Martin / (X)HTML & CSS / Friday June 18th, 2010 / No comments

In Safari and other webkit browsers, the textareas are resizable - you can click-and-drag at their corners to change their dimensions. Ever wondered how you could turn that off, or even apply the behaviour to other elements?

Well, it's simply an implementation of the CSS3 resize attribute, which is part of the new "user interface" section of the specification (which also includes some other pretty cool things, like the ability to change the box model).

But anyway, to disable resizing, simply set the resize attribute for textareas to none:

textarea {
    resize:none;
}

There are several other possible values for the attribute, which can be found at the link above.