Treehouse

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.

ydkjs-3.png

Recent Features

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

  • An Interview with Eric Meyer

    I've always wanted to interview Eric Meyer. His early CSS books are a big reason this blog exists today and the reason why I'm a web developer. Eric gave me some time to hit the history of CSS,...

  • CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet...

Incredible Demos

  • Add Controls to the PHP Calendar

    I showed you how to create a PHP calendar last week. The post was very popular so I wanted to follow it up with another post about how you can add controls to the calendar....

  • MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. View Demo Download The XHTML Menu <ul id="contextmenu"> <li><a...

  • Duplicate the jQuery Homepage Tooltips Using&nbsp;MooTools

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using MooTools. View Demo The XHTML <div id="jq-intro" class="jq-clearfix"> <h2>jQuery is a new kind of JavaScript Library.</h2> <p>jQuery is a fast and concise JavaScript Library...

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!

Use Code Editor