How can i produce a select handle by css

Question

hi guys...

I want to produce a sort of select/resiz border when some on click on the div, and when i move mouse over that the cursor should change accordingly. I want the user to be able to drag the element border and the element re-size accordingly

thanks....

Answer 1

You cannot do that with pure CSS. You would have to use JavaScript. I suggest checking out a JavaScript library like jQuery.

Have a look to this jQuery plugin:

• Resizable Plugin Demo

Answer 2

This is not something which CSS can do by itself. Javascript is needed to do this sort of behaviour.

If you want to implement this, take a look at the Resizeable function of the jQuery UI library. http://docs.jquery.com/UI/Resizable

Answer 3

This is not a job for CSS. CSS is (mostly) for styling only, not functionality.

Check for example the JQuery resizable plugin. It should be what you need.

Answer 4

As others have mentioned, this isn't something that can be accomplished by CSS, which is presentation only. Have a look at Yahoo's excellent YUI library and their Resize Utility, here is an example:

http://developer.yahoo.com/yui/examples/resize/simple%5Fresize.html

Answer 5

There is a very nice demo of using jQuery to do what you are looking for. It uses the jQuery Resizing with images CSS and a few other things. Take a look at Layout