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.
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![Convert XML to JSON with JavaScript]()
If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium. The experience has been great: using JavaScript to create easy to write, easy to test, native mobile apps has been fun. My...
![Face Detection with jQuery]()
I've always been intrigued by recognition software because I cannot imagine the logic that goes into all of the algorithms. Whether it's voice, face, or other types of detection, people look and sound so different, pictures are shot differently, and from different angles, I...
![MooTools 1.2 Tooltips: Customize Your Tips]()
I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...
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.