You know those three lines in the bottom corner of a textarea / div that indicate it can be resized? The ones like these. I want to restyle this icon so the resize functionality of my div is much more obvious. Perhaps something like this. How do I remove these lines while retaining the resize functionality of my div?

I've tried googling and searching SO. The closest I found to someone else asking the same question was this guy, but the best answer suggested turning off resize altogether, which is not what I want.

You know those three lines in the bottom corner of a textarea / div that indicate it can be resized? The ones like these. I want to restyle this icon so the resize functionality of my div is much more obvious. Perhaps something like this. How do I remove these lines while retaining the resize functionality of my div?

I've tried googling and searching SO. The closest I found to someone else asking the same question was this guy, but the best answer suggested turning off resize altogether, which is not what I want.

• javascript
• html
• css

• Well if you hide those lines, textarea can't be resized anyway so i can't understand why you want to hide them and keep textarea resizable – gbalduzzi Commented May 24, 2016 at 15:58
• I have a div in my app I want to make resizeable. But I want something better than those hard to see lines in the bottom corner, to make abundantly clear to the user that this is a resizeable div. The div is black which makes the lines quite hard to see. – user5102448 Commented May 24, 2016 at 16:00
• 1 Perhaps you're saying that it's just not possible? :o – user5102448 Commented May 24, 2016 at 16:01

3 Answers 3

Obs: This answer is for WebKit only, couldn't find for other browsers nor testing with their - names worked.

Not with standard css. The resizer widget, like scrollbars, is typically from OS. You may be able to style it with custom browser selectors, however, that depends on the browser. Webkit can do some limited styling by using the ::-webkit-resizer selector.

textarea::-webkit-resizer {
  background-image: url(http://i.imgur./hQZDwHs.png);
} 

<textarea></textarea>

Also, you can set background-color

textarea::-webkit-resizer {
  background-color: red;
} 

<textarea></textarea>

Extra

1. You can read emulating frame-resize behavior with divs using jQuery without using jQuery UI post to emulate frame-resize, here you will have more possibilities.
2. -moz-resizer does not work on Firefox 46.0.1. Fiddle.
3. All (or most of) Shadow DOM selectors.

You can have a textarea set to a auto resize and removing the resize handler: Follow instructions here:

https://css-tricks./examples/TextareaTricks/

Note that this icon is generated by browser and is not a part of HTML Spec. So you can hide or show it, but you cant change its appearance.

Hope it helps.

html

<div class="form-group resizer">
                <div class="arrow-resizer-textarea"></div>
                <textarea id="mytextArea" class="form-control" placeholder="text here....."></textarea>
            </div>

sass

textarea {
  position: relative;
  z-index: 1;
  min-width: 1141px;
  min-height: 58px;
}

.resizer {
  position: relative;
  display: inline-block;
  &:after {
    content: "";
    border-top: 8px solid #1c87c7;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    -webkit-transform: rotate(-45deg);
    z-index: 1;
    opacity: 0.5;
    position: absolute;
    bottom: 1px;
    right: -3px;
    pointer-events: none;
  }
}
.arrow-resizer-textarea {
  height: 0;
  width: 0;
  border-top: 8px solid #1c87c7;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  -webkit-transform: rotate(-45deg);
  position: absolute;
  bottom: 1px;
  right: -3px;
  pointer-events: none;
  z-index: 2;
}