HTML5/CSS3 - Change the look of resize handles

Question

I don't want to turn off resizing completely, but the resize handles on textareas don't fit with the rest of the page style. Is there a way I can change how it looks, perhaps replacing it with an image of my own? There doesn't have to be backward compatibility for browsers that don't support HTML5.

Answer 1

This is a tough one. There is no way of styling this specific control. Even if you force a different appearance under webkit you still get the damn resize handle:

http://jsfiddle.net/qw73n/

You can, however, work around it and place a background image in the bottom left corner:

http://jsfiddle.net/q5kdr/

But the handler will still appear on top of it.

I'm afraid the only alternative is using jQuery UI resizable:

http://jqueryui.com/demos/resizable/

Answer 2

I made this by wrapping the textarea in a DIV, then placing a ::after element in that div which contains a symbol and has the same background-color as the textarea.

It is important to give the ::after element "pointer-events: none;" because otherwise the user can not click through it. This works in all modern browsers (http://caniuse.com/#feat=pointer-events).

.textarea_wrapper::after {
    pointer-events: none;
    content: "↓";
    font-size: 14px;
    position: absolute;
    height: 22px;
    width: 20px;
    text-align: center;
    bottom: 2px;
    right: -2px;
    background-color: #efefef;
    color: #777;
}

Here is a fiddle: http://jsfiddle.net/herrfischerhamburg/59wy0ttj/7/

Answer 3

Do it like this:

Place an image on top of the bottom right corner where the default handle is! Position absolute etc.

Then on the picture set pointer-events: none and you are done! It is like the pointer ignores completely the image and the events go on the textarea itself.

Cheers!!

NOTE: Maybe you have to use resize: vertical to the textarea because the behavior changes from browser to browser!!

SEE THIS: https://jsfiddle.net/1bsoffu3/1/ a