Geek Answers Handbook

Can I customize the css3 resize function?

It was interesting to me; is it possible to change css3 resize property?

div { resize:both; overflow:auto; }

I want horizontal resizing and want a vertical strip, not a small thing in the corner by default. See Images. In short, can I do the following: enter image description here

In something like this:

enter image description here

... and if this is not possible via css, any other ideas? I would like to keep everything as easy as possible.

+7
html5 stylesheet css3
source share
2 answers

In short, I found the best answer so far in this post: Emulating frame resizing using div using jQuery without using jQuery UI?

Lightweight and simple. I am flagged here as a duplicate.

-one
source share

Obs: this answer is only for WebKit, could not be found for other browsers and did not test them with names - .

The code:

Given that you have an element with the following CSS:

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

If you add the pseudo-selector webkit ::-webkit-resizer , you can configure 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:

-webkit-resizer

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

Final thoughts

I tested with ::-moz-resizer on FF22, did not work. so yes, you are stuck in creating a javascript version by mimicking a descriptor for the StackOverflow text environment.

Additional Information

When modeling shadow pseudo-tag selectors, DO NOT add them to a single selector ::-webkit-resizer, ::-moz-resizer { /*css*/} , because this will invalidate the entire selector.

+9
source share

More articles:


All Articles