div resizable like text-area

html css textarea
codelove picture codelove · Jun 22, 2012 · Viewed 55.8k times · Source

Browsers allow text-areas to be re-sized by dragging their corner by default. I was wondering if this rule could be applied to other elements (a div for instance). I know this effect could be achieved using the jQuery draggable or the jQuery-ui resizable function, but I would like to do it with plain html / css if it is possible to avoid relying on that library. Are their any CSS rules that I could apply to a div to make it behave in this way?

If you have any other solution I would like to hear it.

Answer

sachleen picture sachleen · Jun 22, 2012

Use the css3 resize property.

div {
    resize: both;
}

There is also a resize: horizontal and resize: vertical.

Not currently cross browser http://caniuse.com/#feat=css-resize

Related questions

Should I size a textarea with CSS width / height or HTML cols / rows attributes?

Every time I develop a new form that includes a textarea I have the following dilemma when I need to specify its dimensions: Use CSS or use the textarea's attributes cols and rows? What are the pros and cons of …

Read More
How to autosize a textarea using Prototype?

I'm currently working on an internal sales application for the company I work for, and I've got a form that allows the user to change the delivery address. Now I think it would look much nicer, if the textarea I'm …

Read More
Set textarea width to 100% in bootstrap modal

Was trying all possible ways, but never succeeded: <div style="float: right"> <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button> </div> <!-- Modal --> &…

Read More