Can I change the design of the textarea resize handle in CSS?

Question

Normally, the textarea can be resized both ways by dragging a little triangular handle in the bottom right corner. Once I disable horizontal resizing by setting textarea { resize: vertical; }, the textarea can only be resized up or down while dragging the same little triangle-shaped handle. But it doesn't seem very intuitive as the trianglular handle suggests that I should be able to resize the textarea along both axes.

I noticed that StackOverflow has a modified resize handle on this very textarea I am typing my question into. It intuitively implies only vertical resizing and it looks cute. If you click Ask Question, you will see it at the bottom of the textarea box. My guess is it is modified using jQuery. But can the looks of the resize handle be changed using simple CSS?

Answer 1

Actually, the HTML part for SO answer textarea is:

<div class="wmd-container">
    <div class="wmd-button-bar" id="wmd-button-bar"> .... </div>
    <textarea data-min-length="" tabindex="101" rows="15" cols="92" name="post-text" class="wmd-input processed" id="wmd-input"></textarea>
    <div class="grippie" style="margin-right: 0px;"></div>
</div>

The div .grippie is just a SVG image with an handler set to listen on your click&drag action, using the cursor offset in height to set the height of the textarea dinamically.

Check this if you want to know more about it