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.
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![CSS Animations Between Media Queries]()
CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
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.