Style Textarea Resizers
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.
![I’m an Impostor]()
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
![An Interview with Eric Meyer]()
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
![MooTools Text Flipping]()
There are lots and lots of useless but fun JavaScript techniques out there. This is another one of them.
One popular April Fools joke I quickly got tired of was websites transforming their text upside down. I found a jQuery Plugin by Paul...
![Digg-Style Dynamic Share Widget Using MooTools]()
I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...
Whoa, I knew about scrollbars, but not about the resizer.
Thanks for the info!
so awesome. =)
Cool. Thanks. The options to style the resizer with css only seem to be fairly limited though ;)
http://jsfiddle.net/CkLQD/1/
Awesome work Stophe, that looks great!
Looks great!
Wow. I had no idea. Thanks for sharing!
Too bad you cannot style the over, neither with an animation : http://cdpn.io/aoeJA
Is it possible to use this in IE ?
Not at the moment, unfortunately.
No love for Firefox?
https://developer.mozilla.org/en-US/docs/CSS/resize
That page doesn’t say anything about styling the resizer.