Html Question posted in
Some basic documentation can be found here.

Html – CSS – hiding resize handle on resizable element

I have a resizable element, for which some browsers render one style of the resize "handle", other browsers a different style and some… well, one browser (yes, looking at you Apple) doesn’t render it at all these days. In order to provide consistent styling and visual clue that the element is resizable I can add my own graphics for that handle. This renders nicely and consistently on all browsers. The problem is that "original" handle is still there on browsers, which happen to include their own. I’d like to make it disappear and I found similar older questions, also including answers that might have worked at the time, like

https://stackoverflow.com/a/47100141/2428025
https://stackoverflow.com/a/11777737/2428025

  • "covering" the handle with an :after pseudo element

that no longer (?) works or

  • the ::webkit-resizer

that still works, albeit not on Firefox

https://caniuse.com/mdn-css_selectors_-webkit-resizer

So I am still looking for a cross-browser solution that would work in 2024.

Tags:

2

Answers


  1. 0

    Resizers are OS specific. Currently there is no way in Firefox to style the resizer. You could use a pseudo element but it is still hard to match the size of the actuall resizer since its width is adjusted in JS by the browser. As shown below, it breaks easily by reducing a huge amount of zoom level in Firefox, and you still need to account for it covering actual contents in the resizable div:

    .custom-resize{
  position: relative;
  border: 1px solid blue;
  resize: both;
  overflow: auto;
}

.resize-wrapper {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.resize-wrapper::after {
  content: '';
  display: block;
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 15px;
  height: 15px;
  background-color: white;
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
}
    <div class="resize-wrapper">
  <div class="custom-resize">Resize me ...</div>
</div>

    If you want a consistance solution I’ll suggest you implement a custom resizer using JS instead of using the native CSS resize, or check out third party libraries such as the JQuery Resizable Widget.

    Login or Signup to reply.
  2. 0

    Resizers work on only their specific os.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search