35

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:

enter image description here

Into something like this:

enter image description here

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

9
  • 2
    Copy Stackoverflow's answer textarea. The Size is handled by a bar instead of css resize.
    – RaphaelDDL
    Sep 2, 2013 at 21:29
  • Ah, thanks for the pointer, but as far as I can make out, it is not based on the above mentioned css3 properties. I am trying to keep the javascript to a minimum.
    – benteh
    Sep 2, 2013 at 21:57
  • Well, I suggested the JS because of and if this is not possible through css, any other ideas? I found how style it on webkit via shadow dom. Dunno about other browsers.
    – RaphaelDDL
    Sep 3, 2013 at 13:41
  • Fair enough, indeed, and I appreciate the time you and other people spend reading and answering my questions. I was hoping to stay with css3, but it seems I need js regardless.
    – benteh
    Sep 3, 2013 at 16:34

3 Answers 3

21

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:

-webkit-resizer

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.

6
  • 1
    Much thanks, and you are indeed right in that I cannot get around it in a sustainable way without js. Thank you very much for your time.
    – benteh
    Sep 3, 2013 at 16:36
  • Where would I find StackOverflow's textarea handle code?
    – dguay
    Nov 16, 2018 at 15:59
  • 1
    I believe that webkit has dropped support of this feature since this was posted. Dec 12, 2018 at 2:13
  • @ZachSaucier It did not drop. Safari 12 (OSX Mojave) still supports it.
    – RaphaelDDL
    Dec 12, 2018 at 3:04
  • 1
    Using textarea::-webkit-resizer still works in Chrome 80, but for some reason it only takes-effect if I mouse-over the textarea element first. I don't know if this is a bug or not.
    – Dai
    Mar 24, 2020 at 5:00
5

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>
3
  • 1
    love the answer. would love to implement it in the nearest future. However, i wonder why the naming convention (class, variable, id names etc)? Its rather odd and a bit difficult to track. Nevertheless...thanks Oct 22, 2021 at 9:54
  • 2
    Sorry :), but I gave the true working example. Variables names are in polish language, but you can exchange in with below little dictionary: suwak = slider, gałka = button/handle, pozycja = position, kontener = contener, wysokosc = height, przesuwany = slideable, pozycja = position, myszkawDol = muse down, startowaWysokoscKontenera = start height of the contener, tak = yes, nie = no Oct 23, 2021 at 14:25
  • I created a similar JavaScript function for converting textareas to be resizable by dragging the bottom edge. You can find it here.
    – ramtam
    Jan 25, 2022 at 19:50
1

I made this work with only css (webkit only), is a bit complicated but if your content is not interactive you can just use a couple of the classes.

This takes advantage of the fact that the resizer size depends on the width and height of the scrollbars.

I used this answer to come up with the trick to have the parent match the size of the child resizer. Set Parent Width equal to Children Total Width using only CSS?

/* an invisible scroll bar covers the content if you dont use a parent.
you can omit the parent if your content is not interactive.
using a parent allows the content to be clickable and also avoids scrolling the content
is better overall but more complicated
*/
.resize-parent {
  background-color: orange;
  position: relative;
  display: inline-block;
  overflow: clip;
}

.resize {
  background-color: wheat;
  width: 300px;
  height: 250px;
  position: relative;
  resize: horizontal;
  overflow-x: overlay;
  z-index: 0; /* this makes the content clickable */
}


/* this is necesary to make the scrollbars appear */
.resize::before {
  content: "";
  width: 105%;
  height: 105%;
  background: transparent;
  pointer-events: none;
  display: block;
  position: absolute;
}


/* not necesarry if not using a parent */
.resize-content {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: border-box;
  padding-left: 10px; /* same scrollbar width */
  margin-left: -10px; /* same scrollbar width */
  background: silver;
}


/* the scrollbar controls the size of the resizer */
.resize::-webkit-scrollbar {
  height: 250px; /*at least the same as .resize */
  width: 10px; /* as desired */
}

.resize::-webkit-resizer {
  background: cadetblue;
}

/* this is behind of the resizer and can be used to style it */
.resize::-webkit-scrollbar-corner {
  background: gold;
}

/* used to figure out how this works */
.resize::-webkit-scrollbar:horizontal {}
.resize::-webkit-scrollbar-button {}
.resize::-webkit-scrollbar-track {}
.resize::-webkit-scrollbar-track-piece {}
.resize::-webkit-scrollbar-thumb {}
<div class="resize">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <a href="#">Click</a>
</div>

<div class="resize-parent">
  <div class="resize-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <a href="#">Click</a><br>
  </div>
  <div>
    <div class="resize"></div>
  </div>
</div>

http://jsfiddle.net/v6donx53/ I hope this helps someone

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.