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)

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>