Possible to style the css3 resize function? - html

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)

Answer 2

I would like to propose my solution
https://jsfiddle.net/tomoje/x96rL2sv/26/
It works on every browser, type of device, can be operated with mouse and finger (touch) and doesn't use any image etc.
The trick is to give to user a handle and to expand the handle to whole working area, to avoid mouse/touch to step out from the handle area during moving (it can happen when the javascript function will slow down due to some computer occupation or else)
<div class="cSuwakT" id="idSuwakKontenerGalka"></div>