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.
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![Google Extension Effect with CSS or jQuery or MooTools JavaScript]()
Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...
![Adding Events to Adding Events in MooTools]()
Note: This post has been updated.
One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed to know they can/should click on...
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.