I'm using the CSS3 property:

resize: both;
overflow: none;

This puts a resize handle in the bottom right corner of the element.

My first question is: can I put other handles on the element using this CSS property? ie Can I put a handle in the right edge? I understand this wouldn't always work unless the element is absolutely positioned.

Second question is: Can I style the handles to be something more specific to my app?

I cannot use jQuery resizable; I tested it with what I am trying to do (Div within CKEditor) and it doesn't work. Perhaps an alternative plugin if no one has a solution to the above questions?

I'm using the CSS3 property:

resize: both;
overflow: none;

This puts a resize handle in the bottom right corner of the element.

My first question is: can I put other handles on the element using this CSS property? ie Can I put a handle in the right edge? I understand this wouldn't always work unless the element is absolutely positioned.

Second question is: Can I style the handles to be something more specific to my app?

I cannot use jQuery resizable; I tested it with what I am trying to do (Div within CKEditor) and it doesn't work. Perhaps an alternative plugin if no one has a solution to the above questions?

• javascript
• jquery
• css

1 Answer 1

Check out this post it is the same question: HTML5/CSS3 - Change the look of resize handles

However what it es down to is that it is not possible to do it, however there is a workaround that is using a background image:

textarea {
  height: 300px;
  width: 300px;
  position: relative;
  background: #fff url(http://merchantmomphotoeditor./pixenate/docs/resize_handle2.gif) 100% 100% no-repeat;
}

see http://jsfiddle/q5kdr/