Style Textarea Resizers

Written by David Walsh on March 18, 2013 · 11 Comments

Modern browsers are nice in that they allow you to style some odd properties.  Heck, one of the most popular posts on this blog is HTML5 Placeholder Styling with CSS, a tiny but useful task.  Did you know you can also restyle the textarea resizer in WebKit browsers?  Let me show you how!

The CSS

One of WebKit's lessor known CSS artifacts is the ::-webkit-resizer pseudo:

/* transparent resizer */
::-webkit-resizer{ background-color:transparent; }

/* colorful resizer */
#colorful::-webkit-resizer{ background-color: pink; }

/* background resizer */
#bgresizer::-webkit-resizer{ background-image: url(resizer-background.png); }

::-webkit-resizer can be used by itself, changing all resizer displays, or on individual elements.

::-webkit-resizer certainly isn't a game-changer but it is another level of control most developers don't know is possible.  I do find the default resizer ugly so I may experiment with something nicer in the future.

Comments

  1. Whoa, I knew about scrollbars, but not about the resizer.
    Thanks for the info!

  2. Cool. Thanks. The options to style the resizer with css only seem to be fairly limited though ;)
    http://jsfiddle.net/CkLQD/1/

  3. Wow. I had no idea. Thanks for sharing!

  4. Too bad you cannot style the over, neither with an animation : http://cdpn.io/aoeJA

  5. Is it possible to use this in IE ?

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
Convert NodeList to Array
Newer
Making Sprite-based Games with Canvas