Style Textarea Resizers

By  on  

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.

Raygun Pulse

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

Discussion

  1. MaxArt

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

  2. so awesome. =)

  3. Stophe

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

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

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

  6. Is it possible to use this in IE ?

    • That page doesn’t say anything about styling the resizer.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!