Can I style the resize grabber of textarea?

css, resize, textarea

Solution

WebKit provides the pseudo-element `::-webkit-resizer` for the resize control it automatically adds to the bottom right of `textarea` elements.

It can be hidden by applying `display: none` or `-webkit-appearance: none`:

::-webkit-resizer {
  display: none;
}

<textarea></textarea>

This displays as follows in Chrome 26 on OS X:

Note: Adding `display: none` to `::-webkit-resizer` doesn’t actually prevent the user from resizing the textarea, it just hides the control. If you want to disable resizing, set the `resize` CSS property to `none`. This also hides the control and has the added benefit of working in all browsers that support resizing textareas.

The `::-webkit-resizer` pseudo-element also allows for some basic styling. If you thought the resize control could use significantly more color you could add this:

::-webkit-resizer {
  border: 2px solid black;
  background: red;
  box-shadow: 0 0 5px 5px blue;
  outline: 2px solid yellow;
}

<textarea></textarea>

This displays as follows in Chrome 26 on OS X:

Problem

My designer just gave me the design with text areas with styled resize grabber. The question is: Can I style it or not ?

Original source

Related problems