Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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.

View Demo

::-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.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

Incredible Demos

  • By
    MooTools & Printing – Creating a Links Table of Contents

    One detail we sometimes forget when considering print for websites is that the user cannot see the URLs of links when the page prints. While showing link URLs isn't always important, some websites could greatly benefit from doing so. This tutorial will show you...

  • By
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

Discussion

  1. MaxArt

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

  2. Tiago Celestino

    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. Cubicle Ninjas

    Wow. I had no idea. Thanks for sharing!

  5. René Domingue

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

  6. Kush

    Is it possible to use this in IE ?

  7. Mick

    No love for Firefox?

    https://developer.mozilla.org/en-US/docs/CSS/resize

    • David Walsh

      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!