Possible to style the css3 resize function?

Question

I was wondering; is it possible to style the css3 resize property?

div
{
resize:both;
overflow:auto;
}

I want a horizontal resize, and would like a vertical bar, rather than the little thingamagig in the corner in the default. See images. In short, can I make this:

Into something like this:

...and if this is not possible through css, any other ideas? I would like to keep things as lightweight as possible.

Answer 1

Obs: This answer is for WebKit only, couldn't find for other browsers nor testing with their - names worked.

---

Code:

Considering you have an element with the following CSS:

.styled {
    resize:both;
    overflow:auto;
    background:orange; /* just for looks */
}

If you add webkit's specific pseudo-selector ::-webkit-resizer, you can style the handle:

::-webkit-resizer {
    border: 2px solid yellow;
    background: blue;
    box-shadow: 0 0 2px 5px red;
    outline: 2px dashed green;

    /*size does not work*/  
    display:block;  
    width: 150px !important;
    height: 150px !important;
}

---

Visual:

http://jsfiddle.net/RaphaelDDL/ryphs/1/

Final thoughts

I've tested with ::-moz-resizer on FF22, didn't worked. so yeah, you are stuck into making the javascript version, mimicking StackOverflow's textarea handle.

---

Extra info

When styling shadow dom pseudo selectors, do NOT stack them into a single selector ::-webkit-resizer, ::-moz-resizer { /*css*/} because will invalidate the entire selector.

• Here is mapped all (or most of) Shadow DOM selectors: https://gist.github.com/afabbro/3759334
• More info about Shadow Dom (HTML5Rocks) here and here.
• Better looking and organized list of shadow dom selectors with screens
• List of Mozilla's selectors (there is no pseudo-selector for resizer)