Gaweyne Gaweyne - 5 months ago 5
HTML Question

How to style resizers

You know those three lines in the bottom corner of a

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.


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(;

Also, you can set background-color

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