HTML5/CSS3 - Change The Look Of Resize Handles

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 repla

Solution 1:

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/

Solution 2:

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/

Solution 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

Solution 4:

This is NOT possible across browsers.

---

We have to add an element on top of it and use pointer-event: none. Because the browser set the div height in pixel in a inline style at resizing, sticking an element over it using position: absolute or position: fixed is difficult. Because our relative positioning units vh vw rem em %have no clue of the newest height value.

This would require JavaScript, or something like dynamic CSS variables to read the current height of the element. Hacks around are doable but often leads to misalignments, and funny and unwanted parallax effects.

---

Alternatively, we have to add an extra markup in the HTML.

Because good for the eyes, we can use horizontal lines, the <hr> element. This way the cascading effect is kept. This example sets ↕️ as a resize handle, by adding a ::after rule on the next <hr>, clicking trough. Of course <hr> has to be reserved for this usage, or use a class.

The use of <dd>, <dl> and <dt> elements is not important here, but it's about the use of a <hr> between elements for the resizing handle effect. Also we can use something else than <hr>!.

---

hr::after {
    content: "↕️";               /* We are not forced to use a character, this is just handy for the example. Also notice this particular character is one and half the width of a regular character, as you can see this comment gets a tiny bit misaligned. Hence, changing the char can render differently, you have to take that into account for all browsers */
    position: absolute;          /* Stick to the <hr> horizontal line */
    margin: -1.25em 0 0 calc(100% - 2.15em); /* You might have to adjust that a little depending your font-size and padding used in your page. The value of 2.2em correspond to two times the page padding, plus a little more corresponding of half the character width, so the character goes right over the resize handle. */
    font-size: x-large;         /* This set the size of the handle, and a nice alignment depends to it */
    pointer-events: none !important; /* Click trough. The !important rule avoid some blinking on the 2nd hovering. (Test it!) */
}

dd {
    resize: vertical;            /* Resize handle */
    overflow: auto;              /* Mandatory for the resize to work */
    height: 1.75em;              /* Notice the correspondonce to somewhat the height of one and half of a line, to maximize the effect. */
}

body {
    padding: 1em;                /* Notice the default page padding (or margin) of the document */
    filter: invert();            /* Cheap ass 1337 effect */
    background: black;           /* Just wanna underline that the character color gets inverted, and this can be adjusted by setting a hue filter rule */
}

<!-- The use of <dd>, <dl> and <dt> elements is NOT important here --> <dl><dt><b>Thematic break</b></dt><dd>The HTML <i>hr</i> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.</dd></dl>
<hr> <!-- <hr> between elements -->
     <dl><dt><b>Markup</b></dt><dd>Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.</dd></dl>
<hr> <!-- <hr> between elements -->
      <dl><dt><b>The Description Details element</b></dt><dd>The HTML dd element provides the description, definition, or value for the preceding term (dt) in a description list (dl).</dd></dl>
<hr> <!-- <hr> between elements -->