Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5/CSS3 - Change the look of resize handles

Tags:

html

css

textarea

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.

like image 332
Fibericon Avatar asked Oct 06 '11 03:10

Fibericon


3 Answers

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).

resize handle icon

.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/

like image 99
Henning Fischer Avatar answered Nov 10 '22 19:11

Henning Fischer


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/

like image 40
methodofaction Avatar answered Nov 10 '22 19:11

methodofaction


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

like image 21
geodoo Avatar answered Nov 10 '22 19:11

geodoo