How can I 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.

Chandachandal

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 resize handle:

textarea {
  -webkit-appearance: none;
  appearance: none;
}

<textarea></textarea>

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

textarea {
  height: 100px;
  width: 300px;
  position: relative;
  background: #fff url("data:image/svg+xml,%3Csvg height='16' viewBox='0 0 8 8' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0v4l1.5-1.5 1.5 1.5 1-1-1.5-1.5 1.5-1.5zm5 4-1 1 1.5 1.5-1.5 1.5h4v-4l-1.5 1.5z'/%3E%3C/svg%3E") 100% 100% no-repeat;
}

<textarea></textarea>

But the handler will still appear on top of it.

I'm afraid the only alternative is using javascript.

Fireworm

How can you use jQuery UI resizable to change the look/size? I'm looking at the docs and can't find it – Jimmyjimsonweed

In 2024 there is no difference on appearance the text area is resizable without the CSS in Chrome – Hephzibah

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

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

textarea {
  width: 100%;
  resize: vertical;
  background-color: #efefef;
  border: none;
  min-height: 100px;
}

.textarea_wrapper {
  position: relative;
}

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

<form action="/" method="post">
  <div class="textarea_wrapper">
    <textarea id="comment" cols="58" rows="10" tabindex="4"></textarea>
  </div>
</form>

Hibben

This hack only works with resizers in the lower right corner of the same size as the original resizer. – Bedabble

Yes, it does not change the resizer at all, it just puts an image over it and allows to click through this image. – Hibben

This is difficult to implement, as resize actions set height as pixels. Btw, using position fixed or absolute is likely to cause misalignment. – Catherin

we also rotate it -45deg – Ellis

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

Spindrift

Image link is broken in fiddle – Rabblerousing

Answer 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 -->

Catherin