HTML5 / CSS3 - change the appearance of resize handles

Question

I don’t want to completely disable the resizing, but the resizing handles in the text box do not match the rest of the page style. Is there a way to change how it looks, possibly replacing it with its own image? For browsers that do not support HTML5, backward compatibility is not required.

Answer 1

It is not simple. There is no way to style this particular control. Even if you create a different look under webkit, you still get a damn resizing handle:

http://jsfiddle.net/qw73n/

You can, however, go around it and place the background image in the lower left corner:

http://jsfiddle.net/q5kdr/

But the handler will still appear on top of it.

I am afraid that the only alternative is to use jQuery UI resizable:

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

Answer 2

I did this by wrapping the text area in a DIV, and then placing the :: after element in this div, containing the character and having the same background color as the text box.

It is important to specify :: after element "pointer-events: none;" because otherwise the user cannot click on 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 the fiddle: http://jsfiddle.net/herrfischerhamburg/59wy0ttj/7/

Answer 3

Do it like this:

Place the image on top of the lower right corner where the default descriptor is! Absolute position, etc.

Then, in the picture, set the event pointer: no, and you're done! This is similar to the fact that the pointer completely ignores the image, and the events go along the textuary itself.

Hooray!!

NOTE. Perhaps you need to use resize: vertically for the text field, because the behavior changes from browser to browser.

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