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.
![Interview with a Pornhub Web Developer]()
Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...
![From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!]()
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...
![Create a Context Menu with Dojo and Dijit]()
Context menus, used in the right type of web application, can be invaluable. They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available. Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...
![MooTools Wall Plugin]()
One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell'Anna. The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered. Let me show...
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.