Question

I have a div with the ‘resize’ property. By default, you can only change the size by dragging the window’s bottom-right corner. I would like to know if it’s possible to change the behavior of this at all, such as its appearance, size, or position.

Specifically what I would like to do is allow the user to re-size the window on the edge (rather than the corner), similar to a OS window (preferably on only one side) in css.

Answer 1

Not with standard css. The resizer widget, like scrollbars, is typically from OS. You may be able to style it with custom browser selectors, however, that depends on the browser. Webkit you can do some limited styling by using the ::-webkit-resizer selector.

#somediv {
    resize: both;
}

#somediv::-webkit-resizer {
    background-color: red;
}

But you cannot adjust its width as far as I can tell.