css resize property - change resize icon properties
Not with standard css. The resizer widget, like scrollbars, is typically from OS. You may be able to style it with custom browser selectors, however, that depends on the browser. Webkit you can do some limited styling by using the ::-webkit-resizer
selector.
#somediv {
resize: both;
}
#somediv::-webkit-resizer {
background-color: red;
}
But you cannot adjust its width as far as I can tell.
Is there a way to change the CSS resize corner's position?
Here's one starting point. I essentially created a custom resize icon in the upper right corner. I then used 'mousedown', 'mousemove' and 'mouseup' events to track resizing activity. You might be able to do something similar using 'drag' and related events.
Note the 'mousedown' is on the resize icon, while 'mousemove' and 'mouseup' are on the document body (or some other larger element behind the resizable div).
I've hard-coded the width and height in the JavaScript for the sake of simplicity. That means those values exist in two different places which is not good. You should probably put them only in JavaScript or only in CSS, not in both as I have done.
I needed to put the resizable div into a container that filled the body. Otherwise 'mousemove' events outside of the resizable div were not registered. This might not be an issue if you already have other content "behind" your absolutely positioned resizable element.
For your information: I also initially tried using the native resize functionality. I used transform: rotate(-90deg)
to move the resize corner to the upper right, then put in an inner div with transform: rotate(90deg)
to make the inside content the right-way-up again. However, while this put the resize corner in the correct place, the resizing itself was completely messed up, as the mouse movements and the actually resizing itself were off by 90 degrees. It's a little hard to describe in words, but suffice it to say that, without some major re-working (or perhaps some brilliant code or hidden function) I couldn't get that strategy to work.
var doc = document, ht = 400, wd = 400, main = document.querySelector("#resizable"), x, y, dx, dy;
var startResize = function(evt) { x = evt.screenX; y = evt.screenY;};
var resize = function(evt) { dx = evt.screenX - x; dy = evt.screenY - y; x = evt.screenX; y = evt.screenY; wd += dx; ht -= dy; main.style.width = wd + "px"; main.style.height = ht + "px";};
rsz.addEventListener("mousedown", function(evt) { startResize(evt); doc.body.addEventListener("mousemove", resize); doc.body.addEventListener("mouseup", function() { doc.body.removeEventListener("mousemove", resize); });});
#container { position: absolute; border: solid red 1px; margin: 0; height: 100%; width: 100%;}#resizable { display: block; font-size: 9pt; position: absolute; bottom: 50px; left: 20px; padding: 10px; min-height: 0; min-width: 0; border: solid 1px black; width: 400px; height: 400px; overflow-x: auto; overflow-y: hidden;}#rsz { position: absolute; right: 0; top: 0; width: 20px; height: 20px; background-color: rgba(255, 0, 0, 0.5);}#original {}
<div id="container"> <div id="resizable"> <div id="rsz"></div> (some content) </div></div>
CSS3 resize - Can you move the resize icon?
With css you can change the image of the cursor,
cursor: url(cursor.cur),default;
Related Topics
Can One Pixelate Images with an Svg Filter
Rails Assets Not Precompiling, CSS Looks Different in Production
Hide Overflow on Elements with Fixed Position
How to Figure Out Proper Min-Width and Max-Width Values for Responsive CSS
How to Set Multiple CSS Style Properties in Typescript for an Element
Is Anyone Experiencing Layout Issues After Upgrading to Chrome 72
Customize Bootstrap 5 Text Color Contrast in Button
How to Animate an Element to Swing in CSS3
CSS - "Position: Fixed" Acting Like "Absolute" in Firefox
CSS Child VS Descendent Selector
How to Use Multiple @Include in SCSS
Print Stylesheets for Pages with Long Horizontal Tables