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

Answer 1

In short, I found the best answer so far in this post: Emulating frame-resize behavior with divs using jQuery without using jQuery UI?

Lightweight and simple. I have flagged my post here as a duplicate.

Answer 2

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 3

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>