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
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    Better Pull Quotes with MooTools

    Chris Coyier authored a post titled Better Pull Quotes: Don't Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content -- instead he uses jQuery to dynamically create the pull quotes. The following is the...

  • By
    Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

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!